This is a question asked by the interviewer during the recent BD interview, but I didn’t answer it at that time.
This article will explain the question in the form of question and answer. Of course, the following content is pure fiction, just to show that the big factory interview is a ring. Maybe you can use this format when you become an interviewer.
“I see on your resume that you have used canvas, can you tell me what is canvas pollution?” “When a cross-domain image is drawn to a canvas, the canvas is polluted and the data on the canvas cannot be read.”
“Can you tell me why browsers have this restriction?” “For the safety of users.” Since I hadn’t thought about it before and didn’t want to admit no, I said it casually.
“Can you tell me more?” The interviewer seemed to read my hesitation. “Well… Let me see.” First calm down, pretend not to panic, in fact, a p. “This is the same origin policy limitation. It is supposed to prevent third-party websites from reading the image data of other websites (Canvas rendering third-party image request is not subject to CORS restriction) and avoid user privacy disclosure. For example, if you know the URL of a private image and go to a third-party website, you can request the image, and if you don’t restrict access to the data, the data will be sent to the background of the website and cause information leakage.”
“Good. What’s the solution if we want to use our own website?” “Well, it depends on whether you can control the response of the picture. If you can control it, use CORS to cross domains and add crossOrigin = “Anonymous” when an image request is initiated; Otherwise only their own website to do an agent, so that the website and pictures of the same origin.”
“You mentioned same-origin, why do browsers have same-origin policies?” “To restrict other source documents or scripts from interacting with the current source’s resources. There are two main aspects: one is iframe node access control. If there is no same-origin policy restriction, iframe can access other non-same-origin IFrame DOM nodes at will. For example, iframe of a bank website nested in a phishing website can read the value of the internal password input box from the outside. The other is HTTP response control. If there is no same-origin policy restriction, a third-party website can directly make requests to other websites, and the response can be read. In this way, users’ personal information can be obtained, causing privacy leakage.”
“Good, you said response control. Was the request successful?” “With cross-domain enabled tags such as IMG /form, the request is automatically accompanied by a cookie, and the request is successful without additional processing. This is known as a CSRF attack. With Ajax, cookies are not attached and the request for authentication fails. Notice The same Origin policy only protects information on terminals and blocks only responses, not requests.
“Why don’t browsers just block non-same-origin requests?” “The browser has to respond to the request to know whether to block it or not. If you block the request directly, you can’t do cross-domain requests with CORS.”
. Interspersed with CSRF and other front-end security issues.
“Back to canvas, one last question, canvas performance analysis and common render optimization strategies?” “Not really.” “Well, I’ll see you in the next article.”
If there are any mistakes, please correct them
Develop reading
- Developer.mozilla.org/zh-CN/docs/…