前端知识点

配色方案

本页目录

iframe ​

iframe 作用就是实现网站页面的嵌入，早期后台管理系统经常会使用它来实现，因为它能够以标签页的形式打开多个页面。

同源下的 iframe 页面通信 ​

关于同源与跨域的介绍，查看 cors 模块。

跨域下的 iframe 页面通信 ​

postMessage 方法，比如一些移动端组件库的文档，左侧是文档内容，右侧是演示，可以使用此方法实现左右联动。

JS
// 网页 http://a.ixook.com 发送消息
this.iframeWindow.postMessage("hello world", "http://a.ixook.com");
// 网页 http://a.ixook.com 发送消息
this.iframeWindow.postMessage("hello world", "http://a.ixook.com");
JS
// 网页 B
window.addEventListener("message", messageHandle);

function messageHandle(e) {
    if(e.origin === 'http://a.ixook.com') {
        console.log(e.data) // 发送来的数据
    }
}
// 网页 B
window.addEventListener("message", messageHandle);

function messageHandle(e) {
    if(e.origin === 'http://a.ixook.com') {
        console.log(e.data) // 发送来的数据
    }
}

防止被三方页面嵌套 ​

前端通过以下js代码进行判断：

JS
// 如果当前页面的 window 对象与 window.top 对象不一致，即说明被嵌套
if(window != window.top){
    // 让其父级网站重定向到被嵌入的网站
    window.top.location.href = myURL;
}
// 如果当前页面的 window 对象与 window.top 对象不一致，即说明被嵌套
if(window != window.top){
    // 让其父级网站重定向到被嵌入的网站
    window.top.location.href = myURL;
}

后端可以配置 X-Frame-Options 来设置允许被嵌入的域名或者禁止被所有网页嵌入

CSP 内容安全策略 ​

内容安全策略（CSP）是一个额外的安全层，用于检测并削弱某些特定类型的攻击，包括跨站脚本（XSS）和数据注入攻击等。
更多内容请看 安全 文档

HTML
<!-- 通过 meta 标签来配置 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />
<!-- 通过 meta 标签来配置 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; img-src https://*; child-src 'none';" />