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