Android:Charles修改WebView图片不生效的问题解决

有时候我们可以使用Charles等抓包工具将请求数据和返回数据进行修改,以方便我们的调试。 平时这样修改 API 接口的时候没有任何问题。今天突然对 WebView 中的 HTML 进行修改的时候,发现没有生效。界面上被修改图片的位置是一片空白。

通过翻阅日志和查找资料,发现是因为一些前端的限制,解决办法如下:

1. 找到需要被替换的图片

比如

https://images2015.cnblogs.com/blog/408483/201606/408483-20160615140433463-1600020511.png

2. 解决CSP问题

CSP:Content Security Policy:使用白名单的方式告诉客户端(浏览器)允许加载和不允许加载的资源。因此需要给CSP添加我们新增图片的 HOST 的白名单,否则会自动过滤

拦截资源,找到 Response 的 Header,找到 Content-Security-Policy 字段,在

img-src 'self' data:

后面添加被替换图片的 HOST,白名单之间用空格隔开,末尾用分号隔开。比如

img-src 'self' data: https://images2015.cnblogs.com https://hm.baidu.com;

3. 解决防盗链的问题

一些站点为了防止自己的资源被恶意调用,所以加了防盗链。所以需要在 HTML 内容添加一个标签

<meta name="referrer" content="no-referrer" />

4. 替换资源URL

找到想要被替换的 img 标签,将 src 内容替换为目标图片的 url

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • https://www.html5rocks.com/en/tutorials/security/content-...
    谢大见阅读 5,721评论 0 3
  • 前言 “安全”是个很大的话题,各种安全问题的类型也是种类繁多。如果我们把安全问题按照所发生的区域来进行分类的话,那...
    莫小耿阅读 1,003评论 0 2
  • nginx防盗链的方法 一般,我们做好防盗链之后其他网站盗链的本站图片就会全部失效无法显示,但是您如果通过浏览器直...
    很少更新了阅读 8,563评论 1 3
  • 写在开始: 第一天看了蛮多神奇的网站,之前对于网站的前后端都有一些不是很明确的了解吧,但是第一次看到网站的前端居然...
    WY_ygsq阅读 815评论 0 0
  • 在感情上,我比很多人通透,活得明白, 然后,我看着很多身边的小白,一个一个心甘情愿的掉进自以为是的坑, 再痛苦的挣...
    shance33阅读 136评论 0 0