報錯 because it set 'X-Frame-Options' to 'sameorigin'.
Refused to display 'https://xxx.xxx.cn/' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
解決方法：
修改頁面，增加meta配置
<head>
<!-- CSP 設置 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://yourdomain.com;">
<!-- 其他頭部信息 -->
</head>
原理
在網頁開發中，當你嘗試在一個iframe標籤內嵌入一個設置了X-Frame-Options響應頭爲sameorigin的頁面時，瀏覽器會阻止該頁面在不同源的iframe中加載。這是因爲X-Frame-Options是用於防止點擊劫持（clickjacking）攻擊的安全策略，它告訴瀏覽器該頁面只能在同源（即協議、域名和端口號都相同）的頁面中以iframe的形式展示。
解決方式：
-
更改目標頁面設置：如果你對被嵌入的Java頁面具有控制權，你可以考慮修改服務器端的響應頭配置，移除或更改
X-Frame-Options爲允許跨域。例如，可以將其設置爲ALLOW-FROM <指定源>，但請注意，這個選項在現代瀏覽器中已經不被推薦使用，並且不是所有瀏覽器都支持。X-Frame-Options: ALLOW-FROM https://your-allowed-origin.com -
使用其他安全策略：若你依然需要保持一定的安全性，可以考慮採用更現代的Content Security Policy（CSP）中的
frame-ancestors指令來替代X-Frame-Options，並指定允許嵌入的源。Content-Security-Policy: frame-ancestors 'self' https://your-allowed-origin.com;
修改HTTP頭部或Meta標籤
Content-Security-Policy (CSP) 是一種通過HTTP頭部或Meta標籤在網頁中設置的安全策略，用於控制瀏覽器允許加載哪些資源。具體添加位置如下：
-
HTTP Header：
在服務器端配置，將CSP規則添加到HTTP響應頭中，例如在Apache、Nginx等Web服務器的配置文件裏，或者在應用程序（如Node.js、PHP、Java Servlets等）中設置響應頭。以下是一個在HTTP響應頭中設置CSP的例子：Content-Security-Policy: default-src 'self'; script-src 'self' https://trustedscripts.com; style-src 'self' https://stylesheets.com; img-src 'self' data:; object-src 'none'; base-uri 'self'; -
HTML Meta 標籤：
當無法通過服務器端設置時，可以在HTML文檔部分使用標籤來定義CSP。注意，這種方式支持的功能可能不如HTTP頭部方式全面，並且某些現代瀏覽器可能不再支持通過meta標籤設置某些CSP指令。<head> <!-- CSP 設置 --> <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' https://trustedscripts.com;"> <!-- 其他頭部信息 --> </head>
選擇哪種方式取決於你的應用架構和部署環境，通常推薦優先考慮通過HTTP頭部來設置CSP以獲得最佳兼容性和安全性效果。
歡迎關注公-衆-號【TaonyDaily】、留言、評論，一起學習。
Don’t reinvent the wheel, library code is there to help.
文章來源：劉俊濤的博客
若有幫助到您，歡迎點贊、轉發、支持，您的支持是對我堅持最好的肯定(_)