头盔 + contentSecurityPolicy 不允许地图嵌入

问题描述

我从另一个项目中获得了这段代码,我将其重新用于新项目; url 变量中包含的所有其他允许的链接都有效(Bootstrap 没有问题,Fontawesome 没有问题),但我的地图嵌入来自 Bing 或 Google 不允许加载。 (This is the error I get) 我已经将 Google 链接放在多个源 URL 变量中,以查看它们中的任何一个是否可以工作,但还没有。我的理解是它应该在 frameSrcUrls 变量中。我试过完整链接和较短的链接

app.use(helmet());

const scriptSrcUrls = [
    "https://stackpath.bootstrapcdn.com/","https://kit.fontawesome.com/","https://cdnjs.cloudflare.com/","https://cdn.jsdelivr.net","https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css","https://www.google.com/maps/embed",];
const styleSrcUrls = [
    "https://kit-free.fontawesome.com/","https://stackpath.bootstrapcdn.com/","https://fonts.googleapis.com/","https://use.fontawesome.com/",];
const connectSrcUrls = [
    "https://www.google.com/maps/embed",];
const fontSrcUrls = [];
const frameSrcUrls = [
    "https://www.bing.com/maps/embed?h=400&w=500&cp=33.82738079642568~-118.34742312975433&lvl=12&typ=d&sty=r&src=SHELL&FORM=MbedV8","https://www.google.com/maps/"
];
app.use(
    helmet.contentSecurityPolicy({
        directives: {
            defaultSrc: [],connectSrc: ["'self'",...connectSrcUrls],scriptSrc: ["'unsafe-inline'","'self'",...scriptSrcUrls],styleSrc: ["'self'","'unsafe-inline'",...styleSrcUrls],workerSrc: ["'self'","blob:"],objectSrc: [],frameSrcUrls: ["'self'",...frameSrcUrls],imgSrc: [
                "'self'","blob:","data:","https://res.cloudinary.com/ddk48qx4u/",//SHOULD MATCH YOUR CLOUDINARY ACCOUNT! 
                "https://images.unsplash.com/",],fontSrc: ["'self'",...fontSrcUrls],},})
);

这里是代码要运行的地方(这是在一个 EJS 模板中,除了地图之外,所有的工作都有效)

<div class="col-12 col-md-6">
                <iframe
                    src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d106075.12221853396!2d-118.27947601607661!3d33.81624653758076!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2sus!4v1614646698402!5m2!1sen!2sus"
                    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
            </div>

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)