js 获取 网站路径_获取网站资产

通过JavaScript可以直接获取当前网站路径，结合DOM遍历与网络请求分析，能够收集到大多数网站资产信息，包括资源链接、子域名、隐藏路径等，这是前端开发调试与安全测试的基础技能。

js获取网站路径的常用方法

获取网站路径是前端开发中最常见的操作之一，主要通过window.location对象实现，我们可以在控制台直接输入window.location.href获取完整URL，使用window.location.pathname获取路径部分，通过window.location.search得到查询参数，window.location.hash拿到锚点值，如果你只需要当前页面的完整地址字符串，document.URL也能返回同样的结果，但window.location提供了更细粒度的解析能力。

• 获取完整URL：console.log(window.location.href);
• 获取路径：console.log(window.location.pathname);
• 获取域名：console.log(window.location.hostname);
• 获取协议：console.log(window.location.protocol);

有时我们需要从URL中提取特定部分，可以利用正则表达式，比如从/products/category?id=123中提取category，或者从多级路径中获取第一级目录，这些方法在前端路由解析、动态内容加载、页面埋点等场景中广泛应用，业内专家指出，掌握这些基础路径获取方法,能为后续的资产收集打下坚实基础。

如何用JS获取网站资产资源

网站资产在这里指页面依赖的所有资源：JavaScript文件、CSS样式表、图片、字体、API接口路径、以及页面内嵌的其他链接，这些信息通常暴露在前端源码中,使用JS可以系统地收集它们。

网站资产收集方法：从DOM到请求

最常见的方式是遍历DOM树，提取所有带有src或href属性的元素,具体步骤是：

• 获取所有<script>标签，读取src属性。
• 获取所有<link>标签，读取href属性（样式表、图标、预加载资源等）。
• 获取所有<img>标签，读取src属性。
• 获取所有

  <a>标签，读取href属性（可能包含内部页面链接或外部链接）。

• 获取所有<iframe>、<video>、<audio>等资源的src。

将这些URL收集到一个数组中，然后去重、过滤，就能得到一份当前页面暴露的资产列表，行业共识认为，通过这种方式可以识别出相当一部分网站资产，包括子域名、静态资源路径、甚至一些隐藏的管理后台入口。

前端获取网站资源的具体步骤

让我们在浏览器控制台实际操作一遍,模拟前端获取网站资源的过程。

1. 打开目标网站，按下F12进入开发者工具，切换到“控制台”面板。
2. 复制以下代码执行：

function collectAssets() { const assets = new Set(); document.querySelectorAll('script[src]').forEach(el => assets.add(el.src)); document.querySelectorAll('link[href]').forEach(el => assets.add(el.href)); document.querySelectorAll('img[src]').forEach(el => assets.add(el.src)); document.querySelectorAll('a[href]').forEach(el => assets.add(el.href)); document.querySelectorAll('iframe[src]').forEach(el => assets.add(el.src)); document.querySelectorAll('source[src]').forEach(el => assets.add(el.src)); return [...assets]; } console.log('网站资产列表:', collectAssets());

3. 控制台会输出当前页面收集到的所有资源URL，你可以进一步过滤出同域名下的路径，或者提取子域名，将URL中的域名部分提取出来，用new URL(url).hostname取出域名，加入到一个集合中,就能得到该页面关联的域名列表。

这种方法虽然简单，但覆盖了大部分静态资源，对于动态加载的资源（如Ajax请求、异步加载的组件），可以通过监听fetch或XMLHttpRequest事件来捕获，但受同源策略限制，只能获取到请求的URL，无法获取响应内容，有时我们还需要探测一些常见的路径（如/admin、/api、/backup），这时可以结合fetch发送HEAD请求，根据返回的状态码判断路径是否存在，但要注意控制请求频率,避免对服务器造成压力。

实战案例：编写一个JS资产收集脚本

我们可以将上面的逻辑整合成一个更完整的工具脚本，批量收集当前网站的信息，假设我们想对自身网站进行一次资产梳理,可以这样操作：

(async function() { // 1. 收集页面静态资源 const assets = new Set(); document.querySelectorAll('script[src]').forEach(el => assets.add(el.src)); document.querySelectorAll('link[href]').forEach(el => assets.add(el.href)); document.querySelectorAll('img[src]').forEach(el => assets.add(el.src)); document.querySelectorAll('a[href]').forEach(el => assets.add(el.href)); // 2. 提取子域名 const subdomains = new Set(); const currentDomain = window.location.hostname; for (let url of assets) { try { const domain = new URL(url).hostname; if (domain.endsWith('.' + currentDomain) || domain === currentDomain) { subdomains.add(domain); } } catch (e) {} } // 3. 探测常见路径（样例） const commonPaths = ['/admin', '/api', '/config', '/backup', '/.git']; for (let path of commonPaths) { try { const resp = await fetch(path, { method: 'HEAD', mode: 'cors' }); if (resp.ok || resp.status === 403) { console.log('发现路径:', path, '状态码:', resp.status); } } catch (e) { // 跨域或网络错误忽略 } } console.log('收集到的子域名:', [...subdomains]); console.log('所有资源URL:', [...assets]); })();

这个脚本可以在控制台直接运行，输出当前页面的子域名列表和所有资源URL，注意：路径探测部分会发起HTTP请求，仅适用于同源或服务器允许跨域的场景，实际使用中，建议先确认网站的使用条款,避免未经授权扫描。

注意事项与限制

使用JS获取网站路径和资产时,有几个关键点需要留意。

• 同源策略：浏览器限制脚本只能访问同源（协议、域名、端口相同）的资源，如果页面引用了第三方CDN资源，你能获取到该资源的URL，但无法通过JS读取其内容，跨域路径探测也会受到限制，服务器没有配置适当的CORS头时,fetch请求会失败。
• ：通过DOM遍历只能获取到页面渲染时已经加载的静态资源，对于通过JavaScript动态创建的DOM元素（如点击按钮后生成的图片）,需要额外的事件监听或MutationObserver来捕获。
• 性能影响：大量DOM遍历和异步请求会消耗浏览器资源，特别是在页面元素较多的网站上，建议将脚本执行放在页面加载完成后,并控制请求并发数。
• 法律与道德：收集网站资产信息应仅用于自身网站或获得明确授权的测试,未经授权扫描他人网站可能违反相关法律法规。

常见问题解答：js获取网站路径和资产遇到跨域怎么办？

问题1：js获取网站路径能否获取到完整的URL？

可以，直接使用window.location.href即可获得当前页面的完整URL，包括协议、域名、路径、查询参数和锚点，如果需要各组成部分，推荐使用window.location对象，它提供了hostname、pathname、search等属性,解析更清晰。

问题2：如何用js获取网站资产并导出为文件？

在控制台运行资产收集脚本后，通常结果会打印在控制台，你可以右键复制输出，或者将数据转换为JSON格式，利用Blob和URL.createObjectURL下载为文本文件,下面是一个简单的导出示例：

const data = JSON.stringify(collectAssets(), null, 2); const blob = new Blob([data], {type: 'application/json'}); const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = 'assets.json'; link.click();

问题3：网站资产收集方法中，js方法能获取到所有资产吗？

不能，JS方法仅能获取到前端页面直接暴露的资源，以及同源请求的URL，对于后端隐藏的接口、非浏览器渲染的资源（如服务器配置文件、数据库备份）、需要特定权限才能访问的内容，JS无法触及，它适合作为快速信息收集的起点，更全面的资产发现需要结合爬虫、搜索引擎、DNS解析等工具。