网站内容劫持 广告( 缘由我们公司最近手机端H5经常受到商户和用户的投诉 )

　　网站内容劫持 广告(

缘由我们公司最近手机端H5经常受到商户和用户的投诉

)

　　原因

　　我司近期接到商家和用户关于手机H5的投诉，称有广告，无法正常操作。当然，我们的商家不会添加广告，但是商家和用户可以忽略这些，认为是我们的问题。

　　探索和发现根源

　　目前我们使用的很多浏览器都提供了插件功能。Chrome浏览器系统下有一个广告终结器插件：可以用来屏蔽网页的广告部分。受这个插件影响，我先来探讨一下广告劫持是怎么做的？我想到了通过获取网页的html代码来分析，如下JS代码

　　setTimeout(function(){

    $.ajax({

        url:"/error/ad_log",

        type:'post',

        data:{

            'content': $("html").html(),

            'url':window.location.href

        },

        success:function(){

        }

    });

},3000);

　　在后端，我分析了html内容，发现如下截图。通过截图，我发现页面有更多的JS文件。

　　内容劫持的原理

　　从上图我们分析，一般的劫持就是在页面中加入一个JS文件，然后这个JS文件会执行各种逻辑。根据新引入的JS域名搜索，你会发现很多东西。

　　解决方案

　　知道症状并不意味着可以解决。比如我们公司的就很奇怪，因为插广告导致所有JS出错，用户无法操作（太OK了*，即使插了广告也妨碍别人正常操作）。通过搜索，发现这个问题可以通过CSP解决

　　CSP定义

　　CSP的全称是Content Security Policy，即内容安全策略。可信内容源主要以白名单的形式进行配置。在网页中，白名单中的内容可以正常执行（包括JS、CSS、Image等），而非白名单中的内容无法正常执行，从而减少了横切。站点脚本攻击（XSS）当然也可以减少被运营商劫持的内容注入攻击。

　　使用方法一：元标签

　　在 HTML 的 Head 中添加以下 Meta 标签将阻止非同源脚本在符合 CSP 标准的浏览器中加载和执行。不支持CSP的浏览器会自动忽略CSP信息，不会有影响。具体的兼容性可以在本文末尾的参考资料中找到