iframe引入微信公众号文章开发记录

        微信公众号分享出来的文章，基本上都设置了Content-Security-Policy，文章中的图片也设置了防盗链功能，这就导致直接简单的引入iframe中会出错。

原因分析：

        1、微信公众号文章设置了Content-Security-Policy：frame-ancestors self https://xxx.com ，这就相当于服务器告诉浏览器：如果某个页面想通过iframe引用微信公众号文章，那么这个页面的域名得跟文章链接的域名一致，否则不允许引用。

        2、文章中的图片设置了防盗链功能。如果通过非微信相关的浏览器打开，部分图片也将无法显示。这也是由于微信设置了跨域的限制。

解决方案：

        既然是由于域名的原因导致无法引用，那么就想办法使用自己的域名。思路就是通过file_get_contents获取微信公众号文章的html内容，将其中所有的data-src替换为src（文章图片的url设置在data-src中），然后将所有图片的URL拼接成一个本地域名下的一个地址，文章加载图片的时候，再通过file_get_contents获取图片的内容，返回给前端。这样就能完整的加载微信公众号的文章了，如果设置了CND回源，加载会更快。文字说的再多都不如几行代码解释的清楚，上代码。

html:

php:

以上是解决方案的核心代码，大家根据自己的框架做一些调整就能正常使用了。以上是个人实践过行之有效的方法，欢迎大家批评指正。