I will soon write a series of articles on how to solve programming problems in a step-by-step manner, combining practical problems in development

1, case

In the process of developing the browser plug-in, my drawings (pictures) didn’t show up


2, think

What are the possible reasons for this failure?

  1. Image link error (view code for access)
  2. Other unknown errors (view logs)

3, check the

1. Look at the code and visit the image link and find no problem

<img src="https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/9/170bcc2df7de9548~tplv-t2oaga2asx-image.image" />

Copy the code

Still so cute

2. Check the console log, and an error occurs

Refused to load the image ‘https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/3/9/170bcc2df7de9548~tplv-t2oaga2asx-image.image’ because it violates the following Content Security Policy directive: “img-src ‘self’ data:“.

After reading carefully extract keywords, translation error

The content security policy directive “img-src ‘self’ data refuses to read this lovely image

Find do not understand the meaning, search, find the relevant knowledge points

4. Learn technology

What is the CSP

The essence of a CSP is a whitelist policy, which predetermines which resources can be loaded and which cannot be executed in order to prevent cross-domain scripting attacks.


How to use the CSP

There are two ways to enable CSP. One is through the content-security-Policy field of the HTTP header.


The other is through the label of the web page.

<meta http-equiv="Content-Security-Policy" content="script-src 'self'; object-src 'none'; style-src cdn.example.org third-party.org; child-src https:">

Copy the code

Take the following code as an example to see what it means

Content-Security-Policy: script-src ‘self’; font-src ‘none’; style-src test.com; img-src * data:

strategy meaning
script-src ‘self’; Js files are loadable only for the current domain
font-src ‘none’; Font file cannot be loaded
style-src test.com; The CSS file test.com domain can be loaded
img-src * data Image files of any domain and base64 encoding can be loaded

If the policy is enabled, an error occurs when an incorrect resource is loaded

For example, HTML uses the following link tag

<link href="test2.com/test2.css" rel="stylesheet" type="text/css"/>

Copy the code

Style-src test.com; The CSS file cannot be loaded and an error is reported.

The resources and scope of the directive

  • resources
resources instructions
default-src All resources
script-src Js file
style-src The CSS file
img-src Image files
font-src The font file
connect-src Request connection file
media-src Media files, video, and audio labels
frame-src The iframe label
  • The scope of
The scope of instructions
* All load allowed
‘none’ Unable to load
‘self’ The current domain name can be loaded
data Base64 encoded images
test.com Specific domain names can be loaded
https: The HTTPS domain name can be loaded

5. Solve problems

Come to the conclusion

Content Security Policy directive: “img-src ‘self’ data:”

Img-src ‘self’ data policy: img-src ‘self’ data policy: img-src ‘self’ data policy: img-src ‘self’ data policy: img-src ‘self’ data policy: img-src ‘self’ data policy Image files can only be loaded in the current domain (http://localhost:3000) and base64, but the image belongs to the domain https://imgkr.cn-bj.ufileos.com/, so an error occurred.

The solution

Configure the CSP image section as:

img-src * data

or

img-src https://imgkr.cn-bj.ufileos.com/ 'self' data

Copy the code

Cute avatars come out!


The tail

The core steps of problem solving are: think -> look -> learn the technology -> solve the problem

In the process of problem solving, more problems are usually introduced. Only by combining more problems and learning knowledge can this error report be worthwhile.

Feel the article straight to the soul, welcome to click attention


This article is formatted using MDNICE