Record--five useful iframe stepping pit problems, collect them quickly!

Here I will share with you some of the knowledge I have summarized on the Internet, I hope it will be helpful to everyone

Don't you still know that iframe can't be embedded in Baidu homepage? In order to enrich the user experience, we often embed the content of other websites into our own web pages. However, with that comes a common problem: Iframe embed sites don't work properly. Have you ever encountered this problem and don't know how to solve it? This article will discuss in depth some problems that may be encountered when Iframe is embedded, and present solutions for you. From the same-origin policy, cross-domain mechanism to security measures, we will answer all your questions and help you easily deal with the challenges of IFrame embedding. Let's explore together, unlock the possibility of embedding in websites, and bring users a smoother browsing experience

Unable to embed Baidu page - X-Frame-Options response limit

Baidu uses the X-Frame-Options response header to limit its nesting in iframes. X-Frame-Options is a security policy that can be set by a website's server to control whether pages are allowed to be nested in iframes. When the website sets X-Frame-Options to DENYor SAMEORIGIN, the browser will not allow the page to be loaded in an iframe to prevent security issues such as click hijacking.

DENY: Disables nesting of all pages in iframes, regardless of origin domain.

SAMEORIGIN: Allow pages of the same origin to be nested in iframes, but prohibit pages of different origins from nesting.

allow-from XXX.com: Allow nesting of websites of the specified domain name.

cookie setting sharing issue

If the login and session management of the target website relies on cookies, due to cross-domain restrictions, cookies cannot be set or read in the main domain, resulting in login status not being saved or shared properly

This is a website that I use iframe to nest a cookie login

Browsers restrict cookies from being set by pages in iframes using set-cookiethe header. This is for security reasons to prevent cross-domain cookie pollution attacks. When a page from a different domain is loaded in an iframe, the page fails to set-cookieset a cookie on the main page's domain by setting the header.

This restriction is caused by the Same-Origin Policy, which requires web pages to only access resources from the same domain. Cookies are a mechanism for tracking session state and storing user data. In the case of cross-domain, cookies may be abused by malicious websites, so browsers prohibit cross-domain.

set-cookieHeader.

SameSite	option
Strict	Third-party cookies are strictly prohibited
Lax	Only sent for get requests
None	Cookies can only be sent via the HTTPS protocol, that is, they must have a Secure field

solution:

Use the same domain proxy : set the proxy on the server side, let the server request the resources of the target domain, and then pass the result to the front end, and the front end processes the cookie. This avoids cross domain cookie issues.
Using tokens : Authentication and session management by using tokens in requests without relying on cookies. For example, if I directly embed the Nuggets page, the usage is normal

CORS: Consider setting the CORS response header of the target web server to allow requests for specific domain names to access resources.

Jump problem in iframe

First of all, there is no problem in introducing csdn in the iframe, and some content can be accessed normally, probably because most of them are get requests, so access is not restricted, but if the login operation is performed, the following problems will occur .

This error usually occurs in the browser and involves jumping to an iframe. This is due to the browser's security mechanism that prevents the current window from navigating to pages of other domain names in an iframe to prevent potential security risks.

This error message indicates that the current window (main page) is trying to navigate to www.csdn.net/ in an iframe

But due to the browser's security policy, such an operation is not allowed

I looked at the called interface, and it is true that when logging in, there will be an address that needs to be redirected, which should be the address for login authentication.

And the returned setcookie requests all throw exception warnings, which is also mentioned in the above cookie

没有了鉴权的这一个步骤，我们可以看到鉴权后的下一个接口的请求，在这个请求登录的接口上，已经没有携带上cookie的信息，自然是无法登录的。

http无法嵌入https

如果页面使用的是 HTTP 协议，而尝试将 HTTPS 页面嵌入到该页面中的 iframe，浏览器会认为它们不是同源的，从而阻止加载 HTTPS 页面。这是为了保护用户的安全和隐私，防止潜在的安全风险，例如通过 HTTP 页面窃取在 HTTPS 页面中输入的敏感信息。

解决方案：

使用 HTTPS 协议: 主页面也迁移到 HTTPS 协议，这样就不会涉及到 HTTP 和 HTTPS 跨域的问题。
服务器代理: 在服务器端设置代理，让服务器请求 HTTPS 页面的内容，然后将结果传递给 HTTP 页面的前端，由前端进行展示。
使用 Subresource Integrity (SRI) : 如果目标 HTTPS 页面提供了 SRI 支持，可以使用 SRI 来加载和验证脚本和样式。

最佳做法是将页面迁移到 使用 HTTPS 协议。