有时候我们可以使用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