使用JavaScript检查同源URL

JavaScriptJavaScriptBeginner
立即练习

This tutorial is from open-source community. Access the source code

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在本实验中,我们将探索如何使用 JavaScript 检查两个 URL 是否同源。我们将使用 URL.protocolURL.host 属性来比较 URL 的协议和主机,并确定它们是否属于同一来源。对于需要确保其 Web 应用程序安全性并防止跨站脚本攻击的 Web 开发人员来说,这是一项有用的技能。


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/SecurityGroup(["`Security`"]) javascript/BasicConceptsGroup -.-> javascript/variables("`Variables`") javascript/BasicConceptsGroup -.-> javascript/data_types("`Data Types`") javascript/BasicConceptsGroup -.-> javascript/arith_ops("`Arithmetic Operators`") javascript/BasicConceptsGroup -.-> javascript/comp_ops("`Comparison Operators`") javascript/BasicConceptsGroup -.-> javascript/obj_manip("`Object Manipulation`") javascript/SecurityGroup -.-> javascript/web_sec("`Web Security Basics`") subgraph Lab Skills javascript/variables -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} javascript/data_types -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} javascript/arith_ops -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} javascript/comp_ops -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} javascript/obj_manip -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} javascript/web_sec -.-> lab-28441{{"`使用JavaScript检查同源URL`"}} end

检查两个URL是否同源

要检查两个URL是否同源:

  1. 打开终端/SSH并输入 node 以开始练习编码。

  2. 使用 URL.protocolURL.host 检查两个URL是否具有相同的协议和主机。

const isSameOrigin = (origin, destination) =>
  origin.protocol === destination.protocol && origin.host === destination.host;
  1. 使用你要比较的URL创建两个URL对象。
const origin = new URL("https://www.30secondsofcode.org/about");
const destination = new URL("https://www.30secondsofcode.org/contact");
  1. 将两个URL对象作为参数调用 isSameOrigin 函数以获得布尔输出。
isSameOrigin(origin, destination); // true
  1. 你也可以使用其他URL测试该函数,以查看它们是否同源。
const other = new URL("https://developer.mozilla.org");
isSameOrigin(origin, other); // false

总结

恭喜你!你已经完成了同源URL实验。你可以在LabEx中练习更多实验来提升你的技能。

您可能感兴趣的其他 JavaScript 教程