1. Same-Origin Policy ⭐⭐⭐⭐⭐

1️⃣ What is "Origin"

• Protocol + Domain Name + Port The three are exactly the same

https://example.com:443

As long as there is one difference, it is different source

URL	Whether it has the same origin
https://example.com/a	✅
http://example.com	❌(agreement)
https://sub.example.com	❌(domain name)
https://example.com:8080	❌(port)

2️⃣What are the limitations of the same-origin policy?

❌ Restricted (emphasis)

1️⃣ DOM access

iframe.contentWindow.document // 不同源直接报错

2️⃣ Cookie / LocalStorage / IndexedDB

• Can't read
• Can't write

3️⃣ AJAX read response

fetch('https://api.com') // 请求发得出，结果读不到

⚠️ Note: The request itself can be sent!

✅ Unlimited

Behavior	Description
<img src>	Common tips
<script src>	JSONP basics
<link>	CSS
<iframe>	Just can't access the content

3️⃣ Why do we need a same-origin policy?

In one sentence:

• Prevent malicious websites from reading your private data on other websites

If there is no same-origin policy:

• Website A can directly read the cookies of website B
• The bank/mailbox is directly dragged to the database

4️⃣ One sentence version that must be tested in interviews

• The same-origin policy is a browser security mechanism used to restrict resource access between different sources and prevent malicious websites from stealing user data.

2. CORS (Cross-Origin Resource Sharing) ⭐⭐⭐⭐⭐

• CORS is "the back-end actively opens the door" to allow the front-end to cross domains

It’s not front-end technology, it’s browser + server negotiation rules

1️⃣ Why do you need CORS?

Because:

• Same Origin Policy Restricted Reading
• But modern front-ends must call APIs across domains

2️⃣ Simple request vs preflight request (Ultra High Frequency)

✅ Simple request (will not trigger preflight)

Meet all conditions:

• Method: GET / POST / HEAD

• Content-Type：

  • text/plain
  • application/x-www-form-urlencoded
  • multipart/form-data

• no custom header

fetch('https://api.com/data')

🚨 Non-simple request → Preflight (OPTIONS)

fetch('https://api.com/data', {
  method: 'PUT',
  headers: {
    'X-Token': 'xxx'
  }
})

Browser first:

OPTIONS /data
Origin: https://web.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Token

Server response:

Access-Control-Allow-Origin: https://web.com
Access-Control-Allow-Methods: PUT
Access-Control-Allow-Headers: X-Token

Only after passing the request will the actual request be made.

3️⃣ CORS common response headers (must be memorized)

Access-Control-Allow-Origin: https://web.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Content-Type, X-Token
Access-Control-Allow-Methods: GET, POST

⚠️ Deadly combination

Allow-Origin: *
Allow-Credentials: true ❌

The browser directly rejects

4️⃣Cookie cross-domain correct posture

front end

fetch(url, {
  credentials: 'include'
})

backend

Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://web.com
Set-Cookie: sid=xxx; SameSite=None; Secure

5️⃣ CORS interview high-frequency pitfalls

❓ Why am I getting an error even though I have allowed cross-domain?

👉 Common reasons:

• Preflight request not processed OPTIONS
• Forgot to return Allow-Headers
• Used * + credentials
• The actual response does not have a CORS header (it is only included in OPTIONS)

3. CSP (Content Security Policy) ⭐⭐⭐⭐⭐

• CSP is the ultimate weapon to prevent XSS

1️⃣ What is CSP doing?

In one sentence:

• Restrict the resource sources that can be loaded/executed on the page

2️⃣ Basic writing method

Content-Security-Policy:
  default-src 'self';
  script-src 'self';
  img-src 'self' https:;

Meaning:

• All resources are only allowed to yourself by default
• JS can only come from yourself
• Image allowed https

3️⃣ What can CSP protect against?

Risk	CSP protection and limits
XSS	Can restrict injection; still requires encoding and sanitization
eval injection	Restricts string execution unless unsafe-eval is allowed
Compromised third-party scripts	Restricts sources but may allow malicious code from an allowed source
CSRF	Does not replace server-side CSRF protection

4️⃣ Key instructions of CSP (must know)

script-src

script-src 'self' 'nonce-abc123'

<script nonce="abc123">合法脚本</script>

Disable risky behavior

script-src 'self';
object-src 'none';
base-uri 'none';

5️⃣ CSP Report (must be used for production)

Content-Security-Policy-Report-Only:
  default-src 'self';
  report-uri /csp-report

👉 Only report without interception to prevent accidental killing

6️⃣ Framework + CSP practical notes

Vue / React

• Disable eval (affects devtool)
• inline script requires nonce
• Dynamically inserting scripts must cooperate with nonce

4. A picture of the relationship between the three (the most points for the interview)

同源策略：默认全禁
     ↓
CORS：服务器放行“读”
     ↓
CSP：限制“能执行什么”

5. Final summary

• The same-origin policy is the basic security mechanism of browsers, restricting access to resources between different sources;
• CORS means that the server declares which cross-domain requests can be read by the browser through response headers;
• CSP limits page executable resources through a whitelist mechanism to defend against injection attacks such as XSS.