跨站脚本包含XSSI

当恶意站点从第三方域导入 JavaScript 并能够从导入的脚本中提取用户凭据等敏感细节时，就会发生跨站点脚本包含(XSSI) 攻击。如果您的网站将敏感数据存储在 JavaScript 文件中，攻击者将能够诱骗您的用户访问导入您的 JavaScript 代码的恶意站点，从而允许攻击者获取该代码中包含的任何敏感数据。
XSSI 攻击剖析

与其他类型的内容（如 JSON 和 HTML）不同，JavaScript 文件在浏览器中不受同源策略的约束。这允许在呈现网页时包含来自不同域的 JavaScript 文件，但为攻击者提供了窃取 JavaScript 文件中写入的任何敏感数据的独特机会。

JavaScript 框架经常用于构建单页应用程序(SPA)，在用户与页面交互时动态更新 DOM。由于您编写的代码在浏览器可用之前被转译为 JavaScript，因此很容易在 JavaScript 文件中填充一些状态，以便页面组件甚至在从服务器加载状态之前就具有一些上下文信息。

将用户详细信息写入转译后的 JavaScript 似乎是无害的。但是，互联网上的任何网站都可以导入生成的 JavaScript 文件。这意味着攻击者可以构建自己的恶意站点并使用标签导入 JavaScript 代码<script>。然后，攻击者将能够从转译代码中为访问其恶意站点的任何受害者获取敏感细节。他们甚至可能在网站的评论部分链接到他们的恶意网站，以吸引潜在的受害者。
避免

为避免 XSSI 攻击，请勿在 JavaScript 文件中插入敏感数据 - 改用 JSON URL，这些 URL 受浏览器同源策略的约束。以下是在 Angular 和 React 中安全加载访问令牌的方法，例如：

Angular

typescript// The configuration information we will retrieve from the server.export interface Config {  username     : string  accessToken  : string  role         : string}
@Injectable()export class ConfigService {  constructor(private http: HttpClient) {}
  // Retrieve configuration information from the server.    getConfig() {    return this.http.get<Config>('api/config')      .pipe(        catchError(this.handleError)       )  }
  private handleError(error: HttpErrorResponse) {    if (error.status === 0) {      // A client-side or network error occurred. Handle it accordingly.      log.error('An error occurred:', error.error)    } else {      // The server returned an unsuccessful response code.      log.error(`Backend returned code ${error.status}, body was: `, error.error)    }        return throwError('An unexpected error occurred loading configuration.')  }}



React





jsx  async componentDidMount() {    const response = await fetch('/api/config')    const data     = await response.json()
    this.setState({      loading     : false,      user        : data.user,      accessToken : data.accessToken    })  }



原文始发于微信公众号（网安之道）：跨站脚本包含XSSI