Missing crossorigin Attribute

This test page demonstrates a security vulnerability where a cross-origin iframe lacks the crossorigin attribute, which may cause unintended credential transmission and other cross-origin security issues.

Security Issue: Cross-origin iframe without crossorigin attribute, potentially allowing unintended credential transmission or cross-origin information leakage.

Test Case

Vulnerable code:

<iframe 
  src="https://example.com/iframe-content.html" 
  width="100%" 
  height="300"
></iframe>

Note: This is simulating a cross-origin iframe for testing purposes

Explanation

The crossorigin attribute on iframes (and other elements that make cross-origin requests like images, scripts, etc.) controls how the browser handles cross-origin resource sharing (CORS) and credentials. Missing this attribute when loading cross-origin content can lead to security issues:

By default, cross-origin requests include cookies and other credentials
This can lead to unintended credential transmission to third-party domains
May enable session hijacking or cross-site request forgery (CSRF) attacks
Could expose sensitive cross-origin information to the embedding page
Prevents proper error handling for cross-origin resources

How Pink Sock detects this issue:

Pink Sock analyzes iframe elements with cross-origin src attributes and checks for the presence of the crossorigin attribute. When loading cross-origin content without this attribute, it flags it as a medium-severity security issue.

How to fix:

Add the crossorigin attribute to cross-origin iframes with the appropriate value:

<iframe 
  src="https://example.com/iframe-content.html" 
  crossorigin="anonymous"
  width="100%" 
  height="300"
></iframe>

The crossorigin attribute accepts two values:

anonymous: Makes cross-origin requests without sending credentials
use-credentials: Makes cross-origin requests with credentials (cookies, client-side SSL certificates, etc.)

For most scenarios, anonymous is the more secure option as it prevents unintended credential transmission.

Additional Information

Cross-Origin Resource Sharing (CORS)

CORS is a security mechanism that restricts web pages from making requests to domains different from the one that served the original page. The crossorigin attribute works with CORS to control cross-domain resource sharing:

Without crossorigin, the browser still makes the request but can't access certain response data
With crossorigin="anonymous", the request omits credentials but can access the response if the server allows it
With crossorigin="use-credentials", the request includes credentials and can access the response if the server explicitly allows credentials

Server-Side CORS Headers

For the crossorigin attribute to work properly, the server serving the cross-origin content must send the appropriate CORS headers:

For anonymous: Access-Control-Allow-Origin: * or specific origin
For use-credentials: Access-Control-Allow-Origin: specific-origin (not wildcard) and Access-Control-Allow-Credentials: true

Security vs. Functionality

When deciding on crossorigin settings, consider these trade-offs:

Setting	Security Level	Functionality	Use Case
No crossorigin	Low	Limited	Not recommended, legacy compatibility only
crossorigin="anonymous"	Higher	Moderate	Most third-party content where credentials aren't needed
crossorigin="use-credentials"	Medium	Full	Only when authenticated requests to trusted domains are required

Broader Protection Strategy

The crossorigin attribute should be part of a comprehensive approach to cross-origin security:

Implement proper Content Security Policy (CSP) with frame-src directive
Use subresource integrity (SRI) for critical resources
Consider Cross-Origin Resource Policy (CORP) and Cross-Origin Opener Policy (COOP)
Use the sandbox attribute for iframes where appropriate
Implement proper referrer policy controls