iframe - 内容安全策略时，mailto href 内部框架不起作用

Question

摘要:

网站 https://localhost:3000 ，与 Content-Security-Policy default-src 'self' 'unsafe-inline' https://localhost:3001/https_index.html 的值包含指向 https://localhost:3001/index.html 的 iframe 。 :3001/index.html的内容包含<a href="mailto..."></a> 。单击该链接失败:Refused to frame '' because it violates the following Content Security Policy directive... 。 如何更改我的 CSP 值以防止出现此错误；在用户首选的电子邮件客户端中打开新电子邮件(mailto 的正常行为)？ 我使用的是 Chrome¹

详细信息:

与 this question "mailto link not working within a frame chrome (over https)" 相似但不同

我认为我的不是重复的，因为:

1. 我无法重现该错误，我看到控制台关于 mixed-content 的警告当我尝试重现他们的步骤时:

   Mixed Content: The page at 'https://localhost:3001/https_index.html' was loaded over HTTPS, but requested an insecure resource 'mailto:...'. This content should also be served over HTTPS.

2. 我的步骤是具体的；我的页面及其 iframe src 都是 https ，但页面本身具有特定的和限制性 Content-Security-Policy (CSP):

   app.use(csp({
directives: {
defaultSrc: ["'self' 'unsafe-inline' https://localhost:3001/https_index.html"]
}
}));

3. 我可以重现的结果错误也不同:

   Refused to frame '' because it violates the following Content Security Policy directive: "default-src 'self' https://localhost:3001/https_index.html". Note that 'frame-src' was not explicitly set, so 'default-src' is used as a fallback.

图像如下:

accepted answers对于原始问题将帮助我解决我的CSP特定问题，也就是说，如果我添加 target="_top"到该链接，电子邮件客户端打开时不会出现错误: <a target="_top" href="mailto:...">email</a>类似的修复适用于另一个 similar but different issue.但是，这可能¹有时会打开一个新选项卡

所以我的问题特别是关于 Content-Security-Policy error (see above) :

...Refused to frame '' because it violates the following Content Security Policy directive: ...

注意上面写着frame '' 。该帧被识别为空字符串!

通常，如果某些资源违反 CSP，the URL of the resource is identified; i.e.

Refused to laod the script 'http://evil.com/evil.js'...

如果CSP - 违规 URL 已被识别 + 前提是我可以使用它；将其添加到我的 CSP值为 default-src :

`app.use(csp({
  directives: {
    defaultSrc: ["http://evil.com/evil.js 'self' 'unsafe-inline' https://localhost:3001/https_index.html"]
    }
  }));`

但是我可以允许 href 异常(exception)吗？值(value)？专为mailto ？我尝试了像 mailto* 这样的通配符，但是:

The source list for Content Security Policy directive 'default-src' contains an invalid source: 'mailto*'.

我想知道是否有任何通配符都可以工作； Chrome 是否真的考虑 href="mailto..."框架为空字符串？我想是的，因为它本身不是一个 URL； Chrome“想要”在 iframe 上下文中启动外部应用程序(即 Outlook)；谁受其父页面的 CSP 规则约束...

脚注:

1. Chrome 在 CSP 或沙盒情况下会显示上述错误。 Internet Explorer 不会提示 iframes href，尽管值为 CSP 。尽管 sandbox 的值为 Internet Explorer，但 Internet Explorer 也不存在“新选项卡”问题。 。 IE 11.1914 只会给出消息:

使用 target="_top" 的修复可能会打开一个新选项卡，如果您已 sandbox编辑你的 iframe! ( sandbox 与 CSP 不同)。我不喜欢新标签。 Chrome 给了我这个错误...

Unsafe JavaScript attempt to initiate navigation for frame with URL 'http://localhost:3000/' from frame with URL 'https://localhost:3001/index.html'. The frame attempting navigation of the top-level window is sandboxed, but the flag of 'allow-top-navigation' or 'allow-top-navigation-by-user-activation' is not set.

...但打开了一个新选项卡，以及 Outlook 电子邮件客户端...

我做了错误提示的操作；修改 iframe 的值sandbox属性: sandbox="allow-top-navigation allow-same-origin ..." ，并且 mailto 链接有效(和以前一样)，但没有打开过多的新选项卡。太棒了!

Answer 1

遇到同样的问题后偶然发现了这个问题。经过几个小时的搜索后，关于此问题的文档却出人意料地少。

我的第一 react 是像你一样做一些事情，mailto* 或 mailto:*。

最终起作用的是省略通配符，并更改 frame-src 指令，如下所示:

frame-src 'self' mailto: tel: *.mydomain.com

tel: iframe 中的链接也已损坏。