为嵌入式 Google 地图 iframe 创建内容安全策略答案

【问题标题】：Creating a content security policy for embedded Google Maps iframe为嵌入式 Google 地图 iframe 创建内容安全策略
【发布时间】：2021-06-25 10:54:27
【问题描述】：

我为嵌入式谷歌地图 iframe 创建了一个 React 组件，它可以按预期工作。但是，浏览器控制台反复警告我有关内容安全策略：

我去寻找解决方案，但我只找到了与 API 相关的答案。内容安全策略和manifest.json 的概念对我来说是新的，我会继续研究，但现在我只需要帮助设置清单。

清单

"permissions": [
  "https://www.google.com/maps/*"
],
"content_security_policy": ""

组件

import React from "react";

export default function GoogleMap(props: {
    title: string,
    src: string,
    width?: string,
    height?: string
}) {
    return (
        <iframe
            title={ props.title }
            src={ props.src }
            width={ props.width || "100%"}
            height={ props.height || "450"}
            loading="lazy"
        ></iframe>
    )
}

组件调用

import React from 'react';
import './App.css';
import Jumbotron from './components/Jumbotron';
import GoogleMap from './components/GoogleMap';

function App() {
  return (
    <div className="container">
      <div className="row">
        <div className="col">
          <Jumbotron>
            <h1>Hello World!</h1>
            <p>Something, something</p>
          </Jumbotron>
        </div>
      </div>
      <div className="row">
        <div className="col">
          <GoogleMap
            title="Map of Mobit Stakkevollvegen"
            src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d490.15681762061814!2d18.969382885920925!3d69.66688347864422!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x45c4c45ca1720dbb%3A0x48debf799412e7a8!2sMobit%20Stakkevollvegen!5e0!3m2!1sno!2sno!4v1624610965243!5m2!1sno!2sno"
          />
        </div>
      </div>
    </div>
  );
}

export default App;

我应该在manifest.json 中添加什么以安全地删除浏览器控制台警告？

【问题讨论】：

标签： javascript reactjs create-react-app

【解决方案1】：

我不确定这些警告是否是 Firefox 独有的，但this reddit post 似乎说这些警告是由 Google 端的某些东西引起的。因此，尽管您应该实施 CSP 来保护您的应用，但我认为这样做不会消除警告。

【讨论】：

你有学习 CSP 的好资源吗？
@CasperTollefsen MDN Web Docs 应该是一个很好的起点。