LinMinquan's Blog

Experience technology to change life

Aws Amplify Custom Headers Restrict Iframe

网站是部署在 AWS Amplify，是个 Hugo 弄的静态网站。为了解决 Click-Jacking 的安全问题，需要对 iframe 做些设置，不让别的网站可以通过 iframe 嵌入我的网站。

根据参考链接1，根据在 web server 后台做些设置，使得每个 http response header 有特定的值。所以得在 AWS Amplify 后台设置。参考链接2。

我的配置如下，当然下面的配置不只关于 iframe，X-Content-Type-Options 就跟 iframe 没关系。

customHeaders:
  - pattern: '**'
    headers:
      - key: X-Frame-Options
        value: DENY
      - key: X-Content-Type-Options
        value: nosniff
      - key: Content-Security-Policy
        value: frame-ancestors 'none'

就发现更改了配置，也保存了，但就是没有生效。认真看了参考链接2，得 redeploy 一下。得找到对应的 branch，见下图。

aws amplify redeploy this version

我自己写了个简单的 iframe 本地网页，来加载我的网站，发现还是能嵌入成功。

发现用 AWS Amplify 部署的网站的 http response header 的 key 是小写的，而我另一个用 Nginx 部署的网站的 key 是首字母大写的。这到底有没有区别呢？答案是没区别。参考链接3。

我要怎么判断，现在浏览器加载的就是我刚 redeploy 出来的版本呢？

  • 方法一是每次都重新开浏览器的隐身模式，然后看 Headers，参考下图。有时候觉得这方法也有点问题。

  • 方法二，用命令行。参考链接4。 curl -I 'Cache-Control: no-cache, no-store' https://www.example.com/

  • 方法三，看 response header 里的 last-modified，看这个时间跟网站 deploy 的时间是不是一致。

    response header last-modified

然后就会发现，我用 iframe 嵌套我的网站时，iframe 加载的网站，并不是最新版的。那怎样让 iframe 加载的是最新版呢？而不是缓存的呢？参考链接5，我就不断地变换 iframe 的 src，或者在链接的末尾加上 ?id=100，数字 100 可以不断地改成其它的值，这样去加载不同的页面。然后再用上面的方法一，是可以看到 iframe 加载的页面的 header。结果就是有的页面是还是旧的版本，但有的页面就会是新的版本了。

iframe failed

有上图的页面，就算是验证成功了。剩下就等 Amplify 的 CDN 到点更新各个节点网站了。

参考链接：

链接1：How to restrict who can iframe embed my web app?

链接2：AWS Amplify Custom headers

链接3：Are HTTP headers case-sensitive?

链接4：Four ways to read and check HTTP headers

链接5：Preventing iframe caching in browser

链接6：HTML Iframes, W3Schools

Share