# Adsense广告在主题导航或目录页面上未重新加载，frame-src拒绝CSP错误和未捕获的异常错误 EmberJS

**URL:** https://meta.discourse.org/t/adsense-ads-not-reloading-on-topic-navigations-or-on-toc-pages-frame-src-refused-csp-errors-and-uncaught-exception-errors-emberjs/171422
**Category:** Support
**Created:** [2020年十一月26日 14:32 UTC](https://meta.discourse.org/t/adsense-ads-not-reloading-on-topic-navigations-or-on-toc-pages-frame-src-refused-csp-errors-and-uncaught-exception-errors-emberjs/171422 "2020-11-26T14:32:43Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![Faizan\_Zahid](https://avatars.discourse-cdn.com/v4/letter/f/b9bd4f/32.png) [@Faizan\_Zahid](https://meta.discourse.org/u/Faizan_Zahid)
#### Post date: [2020年十一月26日 14:32 UTC](https://meta.discourse.org/t/adsense-ads-not-reloading-on-topic-navigations-or-on-toc-pages-frame-src-refused-csp-errors-and-uncaught-exception-errors-emberjs/171422/1 "2020-11-26T14:32:43Z")

</div>

我在 [https://howtodiscuss.com](https://howtodiscuss.com/) 的 Discourse 网站上运行广告时遇到了很多问题。

1. 出现大量未捕获的 DOM 异常错误，只需以无痕模式访问任何话题页面即可看到，例如：[https://howtodiscuss.com/t/profit/7022](https://howtodiscuss.com/t/profit/7022)

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/e/3e45e095389482f8d5758b2a548bdc6fbd895911.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/7/27660304f56a2b402f0a320239fac5f13c472e8c.png)

1. 另一个错误是，当我从旧话题页面导航到新话题页面时，控制台会出现此警告。虽然会显示 Google Vignette 广告，但由于该警告，广告会消失且页面会跳转，导致用户永远无法点击页面加载/导航之间出现的 Google Vignette 插页式广告。

 ![image](https://global.discourse-cdn.com/meta/original/3X/b/c/bc8f38fce15d63a9b6d3fe9737cbaac898b9de88.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/3/8/381004bf96d693077f93332c4c9fbb4adcb93165.png)

1. 我还尝试在单个话题页面的右侧边栏显示固定的 Google 广告，使用了以下代码：

**JavaScript 代码用于在话题侧边栏插入固定广告，需要使其与目录（ToC）兼容**

```plaintext
<!-- 显示固定广告的插件代码 -->

<script type = "text/discourse-plugin"
version = "0.8" >
	var friends_retries = 0;
var friends_timeout;

api.decorateWidget('topic-timeline-container:before', helper => {
	return helper.h('div.side-block', [
		helper.rawHtml('<div id="friends"></div>'),
	]);
});

api.onPageChange(() => {

	if (window.location.href.indexOf("/t/") > -1) {
		console.log('page changed - topic');
		friends_retries = 0;
		window.setTimeout(loadFriends, 100);

	} else {
		//console.log( 'page changed - not topic');
	}
});

function loadFriends() {

	if (!document.getElementById('friends')) {
		//var timer;
		friends_retries++;
		if (friends_retries < 10) {
			//console.log('timeout rescheduled, try ' + friends_retries);
			window.setTimeout(loadFriends, 100);
		} else {
			clearTimeout(friends_timeout);
			// window.clearTimeout(loadFriends);

			console.log('timeout cleared, gave up');
			// loadFriends();
		}
	} else {

		var bHTML = ' <!-- Topic side bar timeline HTD --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7087907313091932" data-ad-slot="5067761793" data-ad-format="auto" data-full-width-responsive="true"></ins>';

		// var bHTML = '<img src="https://via.placeholder.com/300x250?text=300x250+MPU" alt="Girl in a jacket">';

		$("#friends").html(bHTML);

	}
}

</script>
<!-- 显示固定广告的插件代码 -->

```

**以下是其 CSS 代码：**

```plaintext
/* 用于固定广告 */
/* 时间线布局修复 2.6.0.beta5 */
@media screen and (min-width: 925px) {
    .container.posts .topic-navigation {
        margin-left: 7em;
    }
}

#friends {
    display:block;
    //width:300px; 

    height:150px;
    margin-left:-90px;
    margin-top:-25px;
    margin-bottom:90px;
}
/* 用于固定广告 */

```

有时这段代码可以工作，但在出现目录（ToC）的页面上无法工作，例如在 [How Many Grams In A Quarter Ounce? - How To Discuss](https://howtodiscuss.com/t/how-many-grams-in-a-quarter-ounce/12300) 上就不行。

有人能纠正我代码中的错误，使其也能在 ToC 页面上显示吗？

1. 我还注意到我的代码以及整体的 Discourse 广告插件代码中存在另一个 bug：当我从一个页面导航到另一个页面时，我的 AdSense 广告代码从未刷新或重新加载，因此不会触发任何广告展示。可能是因为 Discourse 在导航时不会完全重新加载整个页面。我希望广告能够刷新，并且通过任何链接导航都能重新加载整个页面，该如何修复？

2. 我的网站上还出现了许多此类 frame-src 错误，例如：[https://howtodiscuss.com/t/how-mouthwash-rinse-become-a-necessary-step-in-oral-hygiene/30631](https://howtodiscuss.com/t/how-mouthwash-rinse-become-a-necessary-step-in-oral-hygiene/30631)

```plaintext
拒绝加载框架 'https://pagead2.googlesyndication.com/'，因为它违反了以下 Content Security Policy 指令："frame-src cm.g.doubleclick.net googleads.g.doubleclick.net www.google.com accounts.google.com pagead2.googlesyndication.com/pagead/s/cookie_push.html gmsg: https://tpc.googlesyndication.com/sadbundle/$csp=er3$/1522577804659956528/index.html"。

```

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/c/1c37782a223c2b3b817428fc853942073037ee9d.png)

我的 CSP 设置如下所示：

 ![image](https://global.discourse-cdn.com/meta/original/3X/5/7/572901a3d0233e7ee5bcf17f278335daa19c21b2.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/4/24048500fcd24d9259c141be0b4e0c599bc8a42b.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/4/8/4817320f8a54f8e77fd0c0fdbb85b787ef012092.png)

但我不知道如何白名单 Google 广告的 iframe 请求？我也尝试过这段代码，但效果不佳，我仍然看到上述 frame-src 错误。如果我在 meta 标签的 frame-src 旁边添加值，它会报错说不能在 meta 标签中使用 frame-src。

```plaintext
<!--<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' http://* 'unsafe-inline'; frame-src ; script-src 'self' http://* 'unsafe-inline' 'unsafe-eval'" />-->

```

如果有人能帮我解决这些问题，将不胜感激：

> **[Beat the Heat: How You Can Protect Your Car From the Sun](https://howtodiscuss.com/t/beat-the-heat-how-you-can-protect-your-car-from-the-sun/29659)**
>
> Did you have an idea that the temperature inside your vehicle can go up to 145 degrees Fahrenheit and the outside temperature can go up to even 200 degrees Fahrenheit when left under the sun for a more extended timeframe? Also, vehicles are not...

 ![image](https://global.discourse-cdn.com/meta/original/3X/8/4/845f2f458320703d558be7f079919f928c737930.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/f/4/f43e794263fdfa52d2c5663bc1a66c1771786d47.png)

我的主页上也出现了此类错误，[https://howtodiscuss.com/（要复现错误，请在无痕模式下打开页面，或使用](https://howtodiscuss.com/%EF%BC%88%E8%A6%81%E5%A4%8D%E7%8E%B0%E9%94%99%E8%AF%AF%EF%BC%8C%E8%AF%B7%E5%9C%A8%E6%97%A0%E7%97%95%E6%A8%A1%E5%BC%8F%E4%B8%8B%E6%89%93%E5%BC%80%E9%A1%B5%E9%9D%A2%EF%BC%8C%E6%88%96%E4%BD%BF%E7%94%A8) VPN，或仅刷新几次，或导航到其他页面，您将在 JS 控制台中看到错误，并且还会看到 Google Vignette 广告在未给用户点击机会的情况下消失）

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/7/e7f7eb16d4616f033bff35aee9a67736e49416aa.png)

希望有人能提供帮助。

我的网站托管在 Cloudflare 上，我使用的是最新版本的 Discourse 2.6.0.beta6，已更新所有插件，并且刚刚重新构建了 Docker。但我仍然看到这些错误。

---

<div class="post-metadata">

### Author: ![simon](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/simon/32/339122_2.png) [@simon](https://meta.discourse.org/u/simon)
#### Post date: [2020年十一月26日 18:45 UTC](https://meta.discourse.org/t/adsense-ads-not-reloading-on-topic-navigations-or-on-toc-pages-frame-src-refused-csp-errors-and-uncaught-exception-errors-emberjs/171422/2 "2020-11-26T18:45:48Z")

</div>

> [@Faizan\_Zahid](#):
>
> 我的网站使用了 Cloudflare。

这很可能是导致您遇到问题原因。请查看一些与 Cloudflare 相关的支持主题，看看是否有任何内容能提示可能导致问题的 Cloudflare 配置问题：[Search results for 'cloudflare #support。' - Discourse Meta](https://meta.discourse.org/search?expanded=true&q=cloudflare%20%20%23support%E3%80%82)

据我所知，您需要确保 Cloudflare 针对 JavaScript、CSS 和 HTML 的速度/性能优化已禁用，以便其与 Discourse 正常工作。

---

<div class="post-metadata">

### Author: ![Faizan\_Zahid](https://avatars.discourse-cdn.com/v4/letter/f/b9bd4f/32.png) [@Faizan\_Zahid](https://meta.discourse.org/u/Faizan_Zahid)
#### Post date: [2020年十一月27日 10:32 UTC](https://meta.discourse.org/t/adsense-ads-not-reloading-on-topic-navigations-or-on-toc-pages-frame-src-refused-csp-errors-and-uncaught-exception-errors-emberjs/171422/3 "2020-11-27T10:32:20Z")

</div>

感谢 @simon 的迅速回复。

按照您的建议，我已关闭 Cloudflare、Brotli，并关闭了所有针对 CSS、JS 和 HTML 的压缩功能，同时也关闭了 Rocket Loader。

 ![image](https://global.discourse-cdn.com/meta/original/3X/2/a/2a0961aa411ba1543ec4e6df3fb597a928ecd7da.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/a/7a9b1582b3cf9f6d1051d5cc730f6fb47a2f6fbc.png)

我还清除了 CF 缓存，并等待了 30 分钟以测试效果，但在访问我的主页 [https://howtodiscuss.com](https://howtodiscuss.com) 时，JS 控制台仍然出现奇怪的错误：

 ![image](https://global.discourse-cdn.com/meta/original/3X/a/e/ae74816e9c27d70f0b75753b7fb59847b28f0f79.png)

在导航到话题页面 [Catholic rosary - How To Discuss](https://howtodiscuss.com/t/catholic-rosary/18598) 时也是如此：

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/5/e5a3b91b33abe0b4496006a42dbb83f69de7ce94.png)

您可以在 Chrome 无痕模式下打开我的网站并尝试导航到几个页面/话题，即可复现这些错误。

另外，您是否知道为什么我固定在话题时间线/话题导航右侧的 AdSense 广告，只有在完全刷新页面（使用浏览器刷新图标）或首次访问网站时才会显示，而在后续页面加载时该功能无法触发广告？它似乎无法检测到话题页面已更改。

它每次都进入这个 else 代码块。我的自定义 Discourse 插件逻辑中是否存在检测用户导航到话题页面的 bug？我希望每次导航时都能显示并重新加载新的 AdSense 广告，但它却进入了 else 分支。代码认为 ID #friends 已存在，但除非我进行完整的硬刷新，否则它从未重新加载。 **超时已清除，放弃了。**

> [@Faizan\_Zahid](#):
>
> ```plaintext
> function loadFriends() {
> 
> if (!document.getElementById('friends')) {
> //var timer;
> friends_retries++;
> if (friends_retries < 10) {
> //console.log('timeout rescheduled, try ' + friends_retries);
> window.setTimeout(loadFriends, 100);
> } else {
> clearTimeout(friends_timeout);
> // window.clearTimeout(loadFriends);
> 
> console.log('timeout cleared, gave up');
> // loadFriends();
> }
> } else {
> 
> var bHTML = ' <!-- Topic side bar timeline HTD --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-7087907313091932" data-ad-slot="5067761793" data-ad-format="auto" data-full-width-responsive="true"></ins>';
> 
> // var bHTML = '<img src="https://via.placeholder.com/300x250?text=300x250+MPU" alt="Girl in a jacket">';
> 
> $("#friends").html(bHTML);
> 
> }
> }
> 
> ```

请帮帮我。您可以自行浏览我的网站话题，会在 JS 控制台中发现所有问题。我在 JS 控制台中还收到了这个警告，Google 的展示广告用户始终无法点击。

```
弃用通知：一次性移除所有事件监听器已被弃用，请逐个移除每个监听器。

```

> **[How To Refurbish Your Staircase?](https://howtodiscuss.com/t/how-to-refurbish-your-staircase/30612)**
>
> Every homeowner wants their home to make a statement. Stunning home décor can fetch you amazing compliments from your guests. Be it your furniture, walls, paintings, decorative items, floors, or flooring accessories, all are essential to your...

 ![image](https://global.discourse-cdn.com/meta/original/3X/1/9/1921b50fa75bb68d4c8c91e23eb55c89e8d5e554.png)

我已经按照您的建议关闭了 CF 的速度优化功能，包括 CSS/JS/HTML 压缩、Rocket Loader 和 Brotli。现在还有什么问题吗？会不会是某个 Discourse 插件导致的？这是我当前启用的插件：

 ![image](https://global.discourse-cdn.com/meta/original/3X/7/d/7de98e6f4adae7016b6923e9a2784be376c5f9fd.png)

 ![image](https://global.discourse-cdn.com/meta/original/3X/e/f/efd80225c3b771d1d5341d200fdf56b4d894ce1e.png)

我的 SSL 设置为严格模式，这会是问题所在吗？

 ![image](https://global.discourse-cdn.com/meta/original/3X/c/0/c08d3d0d35a2f62b7733e4c379bed01efa07243c.png)

我还刚刚重新构建了一次，以防构建后变更生效……但错误依旧，刚刚又测试了一次 ☹
