React中设置X-Frame-Options无效怎么办？

Top丶雨萱提问于 2026-01-28 21:47:27 阅读 28

安全

我在React项目里用iframe嵌套了第三方登录页面，结果被安全工具提示存在点击劫持风险。查资料说要设置X-Frame-Options头，但我这样写到组件里没效果：


function AuthPage() {
  // 尝试在这里设置响应头
  response.setHeader('X-Frame-Options', 'SAMEORIGIN');
  return (
    <iframe 
      src="https://third-party-login.com" 
      sandbox="allow-same-origin"
    />
  );
}

控制台却报错说response未定义，难道React里不能这样设置响应头？应该用什么正确方法配置X-Frame-Options防止点击劫持？

点击劫持

我来解答赞 7 收藏

反馈

2 条解答

Air-钧溢 Lv1

React前端代码里没法直接设置HTTP响应头，得在服务端处理。如果你用的是Express，加这么一行代码搞定：

app.use((req, res, next) => {

  res.setHeader('X-Frame-Options', 'SAMEORIGIN');

  next();

});

另外现代做法推荐用Content-Security-Policy，安全性更高：

app.use((req, res, next) => {

  res.setHeader('Content-Security-Policy', "frame-ancestors 'self'");

  next();

});

2026-02-15 04:02

Zz玉娅 Lv1

你这个写法确实有问题，response.setHeader 这种东西是后端的玩儿法，React 是前端框架，它根本不知道什么响应头不响应头。咱们得从头理清楚怎么正确设置 X-Frame-Options。

### 先说原理
X-Frame-Options 是一个 HTTP 响应头，用来控制当前页面是否能被嵌套在

</code>、<code><frame></code> 或者 <code><object></code> 中。它的值有三种：<br />
- <code>DENY</code>：完全禁止嵌套。<br />
- <code>SAMEORIGIN</code>：只允许同源页面嵌套。<br />
- <code>ALLOW-FROM uri</code>：允许指定来源的页面嵌套（不过现在已经被废弃了）。<br />
<br />
重点是，这是一个 **服务器端** 的事情，前端代码没办法直接设置这种 HTTP 头部信息。所以你在 React 里写 <code>response.setHeader</code> 是没用的，React 根本没权限干这事。<br />
<br />
---<br />
<br />
### 正确解决方案<br />
<br />
#### 方法一：通过后端设置响应头<br />
如果你有自己的后端服务器（比如 Node.js、Nginx、Apache 等），可以直接在服务器配置里加上这个头部信息。<br />
<br />
##### 如果是 Node.js Express：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-javascript">const express = require('express');<br />
const app = express();<br />
<br />
// 设置 X-Frame-Options<br />
app.use((req, res, next) => {<br />
  res.setHeader('X-Frame-Options', 'SAMEORIGIN'); // 只允许同源页面嵌套<br />
  next();<br />
});<br />
<br />
app.listen(3000, () => {<br />
  console.log('Server running on port 3000');<br />
});<br />
</code></pre><br />
<br />
##### 如果是 Nginx：<br />
在你的 Nginx 配置文件里加一行：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-none">add_header X-Frame-Options SAMEORIGIN;</code></pre><br />
然后重启 Nginx 就行了。<br />
<br />
##### 如果是 Apache：<br />
在 <code>.htaccess</code> 文件或者 Apache 配置里加上：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-none">Header always set X-Frame-Options &quot;SAMEORIGIN&quot;</code></pre><br />
<br />
这些方法都能保证你的页面不会被其他网站通过 iframe 嵌套，从而防止点击劫持。<br />
<br />
---<br />
<br />
#### 方法二：使用 Content-Security-Policy (CSP)<br />
现代浏览器更推荐用 CSP 来替代 <code>X-Frame-Options</code>，因为它功能更强大。你可以通过设置 <code>frame-ancestors</code> 指令来达到相同效果。<br />
<br />
比如说，在后端设置响应头的时候，改用 CSP：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-none">Content-Security-Policy: frame-ancestors &#039;self&#039;;</code></pre><br />
<br />
如果用的是 Node.js Express：<br />
<pre class="pure-highlightjs line-numbers"><code class="language-javascript">const helmet = require('helmet');<br />
<br />
app.use(helmet.contentSecurityPolicy({<br />
  directives: {<br />
    frameAncestors: ["'self'"], // 只允许同源页面嵌套<br />
  },<br />
}));<br />
</code></pre><br />
<br />
这种方式的好处是，CSP 更灵活，可以做更多安全相关的配置。<br />
<br />
---<br />
<br />
### 关于你的代码问题<br />
你现在的代码里有一个小问题：<code>sandbox="allow-same-origin"</code> 这个属性会让 iframe 内容无法访问父页面的同源资源，除非明确放开。但这和 <code>X-Frame-Options</code> 是两码事儿，别混在一起。<br />
<br />
如果你想让 iframe 正常工作，确保第三方登录页面也设置了正确的 <code>X-Frame-Options</code> 或者 CSP，否则他们的页面可能会拒绝被嵌套。<br />
<br />
---<br />
<br />
### 总结<br />
React 项目本身不能设置 <code>X-Frame-Options</code>，这是后端的事情。你需要根据自己的后端技术栈选择合适的配置方式，要么直接设置响应头，要么用 CSP 替代。如果你没有后端，那建议找个会后端的朋友帮忙，或者研究一下静态资源托管平台（比如 Vercel、Netlify）是怎么配置这些安全头的。<br />
<br />
最后提醒一句，设置完记得清理浏览器缓存再试试哦，不然有时候你以为没生效，其实是缓存捣鬼！
                </div>
                <div class="comment-actions">
                    <button type="button" class="comment-reply-btn uk-button" data-comment-id="21712" data-author-name="Zz玉娅"><i class="ceofont ceoicon-message-3-line"></i>回复</button>
                    <div class="comment-action comment-like " data-comment-id="21712" data-nonce="310be702d3">
                        <span class="comment-like-text"><i class="ceofont ceoicon-thumb-up-line"></i>点赞</span>
                        <span class="comment-like-count" >8</span>
                    </div>
                    <!-- 展开回复按钮 -->
                    
                    <span class="comment-date">2026-01-30 12:03</span>
                </div>
                
                <!-- 回复表单容器 -->
                <div class="comment-reply-form-container" id="reply-form-21712" style="display: none;"></div>
            </div>
        </div>
    <script>window.loadedComments = [{"id":"45712","content":"React前端代码里没法直接设置HTTP响应头，得在服务端处理。如果你用的是Express，加这么一行代码搞定：\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">app.use((req, res, next) => {\n  res.setHeader('X-Frame-Options', 'SAMEORIGIN');\n  next();\n});<\/code><\/pre>\n\n另外现代做法推荐用Content-Security-Policy，安全性更高：\n\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">app.use((req, res, next) => {\n  res.setHeader('Content-Security-Policy', \"frame-ancestors 'self'\");\n  next();\n});<\/code><\/pre>","author":{"name":"Air-钧溢","avatar":"\/\/style.jztheme.com\/images\/avatar\/avatar4316.jpg","url":"https:\/\/www.jztheme.com\/author\/4319","is_post_author":false,"level":"Lv1"},"date":"2026-02-15 04:02","likes":"1","liked_users":[],"depth":0,"post_type":"ask","total_replies_count":0},{"id":"21712","content":"你这个写法确实有问题，<code>response.setHeader<\/code> 这种东西是后端的玩儿法，React 是前端框架，它根本不知道什么响应头不响应头。咱们得从头理清楚怎么正确设置 <code>X-Frame-Options<\/code>。\n\n### 先说原理\n<code>X-Frame-Options<\/code> 是一个 HTTP 响应头，用来控制当前页面是否能被嵌套在 <code><iframe><\/code>、<code><frame><\/code> 或者 <code><object><\/code> 中。它的值有三种：\n- <code>DENY<\/code>：完全禁止嵌套。\n- <code>SAMEORIGIN<\/code>：只允许同源页面嵌套。\n- <code>ALLOW-FROM uri<\/code>：允许指定来源的页面嵌套（不过现在已经被废弃了）。\n\n重点是，这是一个 **服务器端** 的事情，前端代码没办法直接设置这种 HTTP 头部信息。所以你在 React 里写 <code>response.setHeader<\/code> 是没用的，React 根本没权限干这事。\n\n---\n\n### 正确解决方案\n\n#### 方法一：通过后端设置响应头\n如果你有自己的后端服务器（比如 Node.js、Nginx、Apache 等），可以直接在服务器配置里加上这个头部信息。\n\n##### 如果是 Node.js Express：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">const express = require('express');\nconst app = express();\n\n\/\/ 设置 X-Frame-Options\napp.use((req, res, next) => {\n  res.setHeader('X-Frame-Options', 'SAMEORIGIN'); \/\/ 只允许同源页面嵌套\n  next();\n});\n\napp.listen(3000, () => {\n  console.log('Server running on port 3000');\n});\n<\/code><\/pre>\n\n##### 如果是 Nginx：\n在你的 Nginx 配置文件里加一行：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">add_header X-Frame-Options SAMEORIGIN;<\/code><\/pre>\n然后重启 Nginx 就行了。\n\n##### 如果是 Apache：\n在 <code>.htaccess<\/code> 文件或者 Apache 配置里加上：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">Header always set X-Frame-Options &quot;SAMEORIGIN&quot;<\/code><\/pre>\n\n这些方法都能保证你的页面不会被其他网站通过 iframe 嵌套，从而防止点击劫持。\n\n---\n\n#### 方法二：使用 Content-Security-Policy (CSP)\n现代浏览器更推荐用 CSP 来替代 <code>X-Frame-Options<\/code>，因为它功能更强大。你可以通过设置 <code>frame-ancestors<\/code> 指令来达到相同效果。\n\n比如说，在后端设置响应头的时候，改用 CSP：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-none\">Content-Security-Policy: frame-ancestors &#039;self&#039;;<\/code><\/pre>\n\n如果用的是 Node.js Express：\n<pre class=\"pure-highlightjs line-numbers\"><code class=\"language-javascript\">const helmet = require('helmet');\n\napp.use(helmet.contentSecurityPolicy({\n  directives: {\n    frameAncestors: [\"'self'\"], \/\/ 只允许同源页面嵌套\n  },\n}));\n<\/code><\/pre>\n\n这种方式的好处是，CSP 更灵活，可以做更多安全相关的配置。\n\n---\n\n### 关于你的代码问题\n你现在的代码里有一个小问题：<code>sandbox=\"allow-same-origin\"<\/code> 这个属性会让 iframe 内容无法访问父页面的同源资源，除非明确放开。但这和 <code>X-Frame-Options<\/code> 是两码事儿，别混在一起。\n\n如果你想让 iframe 正常工作，确保第三方登录页面也设置了正确的 <code>X-Frame-Options<\/code> 或者 CSP，否则他们的页面可能会拒绝被嵌套。\n\n---\n\n### 总结\nReact 项目本身不能设置 <code>X-Frame-Options<\/code>，这是后端的事情。你需要根据自己的后端技术栈选择合适的配置方式，要么直接设置响应头，要么用 CSP 替代。如果你没有后端，那建议找个会后端的朋友帮忙，或者研究一下静态资源托管平台（比如 Vercel、Netlify）是怎么配置这些安全头的。\n\n最后提醒一句，设置完记得清理浏览器缓存再试试哦，不然有时候你以为没生效，其实是缓存捣鬼！","author":{"name":"Zz玉娅","avatar":"\/\/style.jztheme.com\/images\/avatar\/avatar1537.jpg","url":"https:\/\/www.jztheme.com\/author\/32134","is_post_author":false,"level":"Lv1"},"date":"2026-01-30 12:03","likes":"8","liked_users":[],"depth":0,"post_type":"ask","total_replies_count":0}];</script>        </div>
        <div class="load-more-comments-container" style="display:none;">
            <button class="load-more-comments-btn uk-button" data-current-page="1">加载更多</button>
        </div>
    </div>
</div>

<script>
// 传递 nonce 给 JavaScript
var _jz_ask = {
    answer_nonce: 'e4c597ff25',
    image_nonce: '3243e46b0f'
};

if (typeof _jz_js !== 'undefined') {
    _jz_js.comment_like_nonce = '310be702d3';
    _jz_js.comment_reply_nonce = 'd9038f7486';
}
</script>
                        </div>
                                            </div>
                    <div class="section uk-background-default">
                        <div class="single-related">
                            <div class="title">相关推荐</div>
                            <ul>
                                                            </ul>
                        </div>
                    </div>
                        
                                    </div>
                <footer class="uk-footer uk-background-default">
    Copyright © 2026 JZTHEME All rights reserved<a href="https://www.jztheme.com/sitemap.xml" target="_blank">网站地图</a><a href="https://beian.miit.gov.cn/" target="_blank" rel="noreferrer nofollow">桂ICP备2022001918号-9</a>
</footer>            </article>
            <aside class="uk-width-1-1 uk-width-1-5@s">
                <div class="jz-ask-sidebar" uk-sticky="end: !.jz-ask-single-default; offset: 100">
                    <div class="images uk-background-default">
    <a href="https://www.jztheme.com/ask/safety/16582.html" class="uk-cover-container">
        <img src="https://style.jztheme.com/images/2026/01/jztheme_image_16582.png" alt="React中设置X-Frame-Options无效怎么办？" uk-cover>
    </a>
</div>
<div class="article-author uk-background-default">
        
    <div class="author">
        <img alt='' src='//style.jztheme.com/images/avatar/avatar4414.jpg' class='avatar avatar-60' data-id='14615' height='60' width='60' />        <div class="info">
            <a href="https://www.jztheme.com/author/14615" class="name">Top丶雨萱<span class="level">Lv1</span></a>
            <div class="extra">
                <span uk-tooltip="title:UX设计师; pos: bottom" tabindex="0">职业</span>            </div>
        </div>
    </div>
    
    <div class="data">
        <span><em>2</em>问题</span>
        <span><em>3818</em>人气</span>
        <span><em>620</em>粉丝</span>
        <span><em>41</em>关注</span>
    </div>
    
    <div class="description">
        我喜欢这个世界，也是因为喜欢你。    </div>
    
    <div class="interaction">
        <button type="button" class="uk-follow-btn uk-button btn-primary" data-user="14615"><i class="ceofont ceoicon-add-line"></i>关注</button><button type="button" class="uk-message-btn uk-button" data-user="14615"><i class="ceofont ceoicon-mail-send-line"></i>私信</button>    </div>
    
        <div class="recent">
        <div class="title">Ta的问题</div>
        <ul>
                        <li>
                <a href="https://www.jztheme.com/ask/app/25474.html" title="H5页面通过USB连接Android设备调试时，为什么无法在Chrome DevTools看到实时更新？" class="uk-text-truncate">H5页面通过USB连接Android设备调试时，为什么无法在Chrome DevTools看到实时更新？</a>
                <span>15 阅读</span>
            </li>
                        <li>
                <a href="https://www.jztheme.com/ask/safety/16582.html" title="React中设置X-Frame-Options无效怎么办？" class="uk-text-truncate">React中设置X-Frame-Options无效怎么办？</a>
                <span>28 阅读</span>
            </li>
                                </ul>
    </div>
    </div>

<div class="latest-ask uk-background-default">
    <div class="title">最新问题</div>
    <ul>
                <li>
            <a href="https://www.jztheme.com/ask/tool/26909.html" title="GitHub Actions自托管Runner为什么无法连接到我的EC2实例？" class="uk-text-truncate">GitHub Actions自托管Runner为什么无法连接到我的EC2实例？</a>
            <span>19 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/front-end/26905.html" title="Vite库模式打包后入口文件路径不对怎么办？" class="uk-text-truncate">Vite库模式打包后入口文件路径不对怎么办？</a>
            <span>4 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/tool/26903.html" title="为什么我的自定义ESLint规则无法正确触发？" class="uk-text-truncate">为什么我的自定义ESLint规则无法正确触发？</a>
            <span>12 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/safety/26897.html" title="如何防止Cookie被窃取导致Session劫持？" class="uk-text-truncate">如何防止Cookie被窃取导致Session劫持？</a>
            <span>34 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/app/26892.html" title="真机调试时页面显示空白，但开发工具里没问题？" class="uk-text-truncate">真机调试时页面显示空白，但开发工具里没问题？</a>
            <span>15 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/optimize/26889.html" title="数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？" class="uk-text-truncate">数据预取时使用IntersectionObserver，为什么预加载的图片反而延迟显示？</a>
            <span>12 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/framework/26885.html" title="Element Plus弹窗在移动端高度溢出怎么处理？" class="uk-text-truncate">Element Plus弹窗在移动端高度溢出怎么处理？</a>
            <span>6 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/framework/26883.html" title="阿里低代码平台中自定义组件在移动端渲染异常怎么办？" class="uk-text-truncate">阿里低代码平台中自定义组件在移动端渲染异常怎么办？</a>
            <span>83 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/optimize/26879.html" title="预加载图片时为什么会阻塞关键CSS加载？" class="uk-text-truncate">预加载图片时为什么会阻塞关键CSS加载？</a>
            <span>5 阅读</span>
        </li>
                <li>
            <a href="https://www.jztheme.com/ask/interaction/26876.html" title="富文本编辑器表格跨行跨列合并失效怎么办？" class="uk-text-truncate">富文本编辑器表格跨行跨列合并失效怎么办？</a>
            <span>43 阅读</span>
        </li>
            </ul>
</div>                </div>
            </aside>
        </div>
    </main>
    <!--手机菜单-->
<div class="uk-app-cat">
    <ul>
        <li><a href="https://www.jztheme.com"><i class="ceofont ceoicon-home-smile-line"></i>首页</a></li>
        <li>
            <button class="uk-button" type="button"><i class="ceofont ceoicon-apps-line"></i>菜单</button>
            <div class="list" uk-drop="mode: click;pos: bottom-center">
                <div class="title">问答菜单</div>
                <ul>
                                        <li><a href="https://www.jztheme.com/ask">全部</a></li>
                    <li><a href="https://www.jztheme.com/ask/front-end">前端</a></li>
                    <li><a href="https://www.jztheme.com/ask/framework">框架</a></li>
                    <li><a href="https://www.jztheme.com/ask/component">组件</a></li>
                    <li><a href="https://www.jztheme.com/ask/optimize">优化</a></li>
                    <li><a href="https://www.jztheme.com/ask/interaction">交互</a></li>
                    <li><a href="https://www.jztheme.com/ask/tool">工具</a></li>
                    <li><a href="https://www.jztheme.com/ask/app">移动</a></li>
                    <li><a href="https://www.jztheme.com/ask/safety">安全</a></li>
                    <li><a href="https://www.jztheme.com/ask/follow">关注</a></li>
                </ul>
            </div>
        </li>
                <li><a href="#navbar-login" uk-toggle><i class="ceofont ceoicon-user-6-line"></i>我的</a></li>
            </ul>
</div></div>

                <div id="navbar-login" class="uk-flex-top" uk-modal>
    <div class="uk-navbar-login uk-modal-dialog uk-margin-auto-vertical">
        <div class="top">
            <button class="uk-modal-close-default uk-modal-close" type="button" uk-close><i class="ceofont ceoicon-close-line"></i></button>
            <div class="title">
                <a href="https://www.jztheme.com" alt="JZTHEME">
                    <img src="/logo.png" alt="JZTHEME" />
                </a>
                <p>Hi~欢迎来到 JZTHEME 即刻开启你的创意之旅</p>
            </div>

    		<form action="" method="POST" id="login-form" class="form login-weixin">
    		    <div class="uk-inline uk-width-1-1 uk-margin-small-bottom">
                    <span class="uk-form-icon"><i class="ceofont ceoicon-smartphone-line"></i></span>
                    <input class="uk-input" type="text" name="user_mobile" id="user_mobile" placeholder="请输入手机号" required="required">
                </div>
                <div class="uk-inline uk-width-1-1">
                    <div class="uk-grid-10" uk-grid>
                        <div class="uk-width-3-5">
                            <span class="uk-form-icon"><i class="ceofont ceoicon-newspaper-line"></i></span>
                            <input class="uk-input" type="text" name="captcha" id="captcha" placeholder="请输入验证码" value="">
                        </div>
                        <div class="uk-width-2-5">
                            <script>var is_sms_login=true</script>
                            <button class="send_captcha_mobile mid dark uk-button" type="button" data-smstype="login" data-nonce="6a946fcd5e">获取验证码</button>
                        </div>
                    </div>
                </div>

                <div class="jztheme-tips uk-margin uk-text-danger"></div>
    			<input type="hidden" name="action" value="zongcai_login_sms">
    			<button class="login-button mid dark uk-button">立即登录</button>
    		</form>

    		<div class="social">
    		    <span>更多登录方式</span>
    		    <div class="type">
                	<a href="javascript:;" class="mid qq half qq_login_button ceo_qq_login" uk-tooltip="QQ登录"><i class="ceofont ceoicon-qq-fill"></i>QQ登录</a>
                    <a href="https://www.jztheme.com/oauth/mpweixin" class="mpweixin_login_button mid weixin half" uk-tooltip="关注微信公众号登录"><i class="ceofont ceoicon-wechat-fill"></i>微信登录</a>
                </div>
            </div>
        </div>
		<div class="bottom">
		    <div class="info">
		    注册登录即表示同意 《<a href="/about/terms" target="_blank">服务条款</a>》 和 《<a href="/about/agreement" target="_blank">隐私协议</a>》
		    </div>
		</div>
	</div>
</div>

<script>
    function is_in_weixin() {
        return "micromessenger" == navigator.userAgent.toLowerCase().match(/MicroMessenger/i)
    }

    $(".login-form .mpweixin_login_button,.login-form .mpweixin_login_button").on("click", function(e) {
        setTimeout(function (){
            UIkit.modal('#navbar-login').show();
        },500)
    });
    $(document).on("click", ".mpweixin_login_button", function(e) {
        e.preventDefault();
        var t = $(this)
            , a = t.html();
        if (is_in_weixin())
            return window.location.href = t.attr("href"),
                !0;
        $.post(jztheme.ajaxurl, {
            action: "get_mpweixin_qr"
        }, function(e) {
            if (1 == e.status) {
                $("#navbar-login").find('form').html('<img class="login-weixin-img" src="' + e.ticket_img + '"><p class="login-weixin-p">请使用微信扫码关注登录</p>');
                $("#navbar-register").find('form').html('<img class="login-weixin-img" src="' + e.ticket_img + '"><p class="login-weixin-p">请使用微信扫码关注登录</p>');
                var n = setInterval(function() {
                    $.post(jztheme.ajaxurl, {
                        action: "check_mpweixin_qr",
                        scene_id: e.scene_id
                    }, function(e) {
                        1 == e.status && (clearInterval(n),
                            UIkit.notification('扫码成功，即将登录', { status: 'success' }),
                            window.location.reload())
                    })
                }, 5e3)
            } else
                alert(e.ticket_img);
            t.html(a)
        })
    });
</script>

<script>var verify_sms_send = 0</script>
<script>var verify_jz_login = 0</script>                <!-- 移动端加载效果 -->
        <div class="jz-page-loader" id="jz-page-loader">
            <div class="loader-content">
                <div class="uk-effect-loader">
                    <span class="bar"></span>
                    <span class="bar"></span>
                    <span class="bar"></span>
                </div>
            </div>
        </div>
        <div class="jz-follow">
            <a href="javascript:void(0);" class="jz-return" id="jz-return-btn">
                <i class="ceofont ceoicon-arrow-go-back-line"></i>
            </a>
            <a href="#header" class="jz-upward" uk-scroll>
                <i class="ceofont ceoicon-download-line"></i>
            </a>
        </div>
        <div id="uk-app-navbar" uk-offcanvas="overlay: true">
    <div class="uk-offcanvas-bar">
        <div class="uk-app-nav">
            <button class="uk-offcanvas-close" type="button" uk-close></button>
    		<div class="nav">
    		    <div class="top">
                    <div class="logo">
                		<a href="https://www.jztheme.com">
                			<img src="https://www.jztheme.com/logo.png" alt="JZTHEME">
                		</a>
            		</div>
            		<div class="search">
            		    <form method="get" class="uk-form jz-search-form" action="https://www.jztheme.com">
                            <div class="search-type">
                                <input type="hidden" name="search_type" id="search_type" value="elements">
                                <div class="selected-type" id="selected_type">
                                    <span class="type-text">元素</span>
                                    <i class="ceofont ceoicon-arrow-down-s-line"></i>
                                </div>
                                <div class="type-dropdown" id="type_dropdown">
                                    <div class="type-option" data-type="elements" data-text="元素">元素</div>
                                    <div class="type-option" data-type="tools" data-text="工具">工具</div>
                                    <div class="type-option" data-type="blog" data-text="博客">博客</div>
                                    <div class="type-option" data-type="ask" data-text="问答">问答</div>
                                </div>
                            </div>
            				<input type="search" placeholder="输入关键字搜索" autocomplete="off" value="" name="s" required="required" class="uk-input">
            				<button class="uk-button" type="submit"><i class="ceofont ceoicon-search-2-line"></i></button>
            			</form>
            		</div>
    		        <ul>
    		                		            <li><a href="https://www.jztheme.com"><i class="ceofont ceoicon-home-smile-line"></i>首页</a></li>
    		            <li><a href="https://www.jztheme.com/elements"><i class="ceofont ceoicon-code-box-line"></i>元素</a></li>
    		            <li><a href="https://www.jztheme.com/css"><i class="ceofont ceoicon-css3-line"></i>CSS生成器</a></li>
    		            <li><a href="https://www.jztheme.com/tools"><i class="ceofont ceoicon-tools-line"></i>工具</a></li>
    		            <li><a href="https://www.jztheme.com/blog"><i class="ceofont ceoicon-pages-line"></i>博客</a></li>
    		            <li><a href="https://www.jztheme.com/ask"><i class="ceofont ceoicon-questionnaire-line"></i>问答</a></li>
    		            <li><a href="https://www.jztheme.com/note"><i class="ceofont ceoicon-chat-1-line"></i>笔记</a></li>
    		        </ul>
		        </div>
		        <div class="bottom">
		            		            <a href="#navbar-login" uk-toggle>登录/注册</a>
		            		        </div>
		    </div>
        </div>
    </div>
</div>	    <script type="speculationrules">
{"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/images/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jztheme/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]}
</script>
<script>var jz_like_nonce = "192f782732";</script><script type="text/javascript" src="https://www.jztheme.com/wp-content/plugins/Pure-Highlightjs/assets/pure-highlight.js" id="pure-highlightjs-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/plugins/Pure-Highlightjs/highlight/prism.js" id="Prism-js-js"></script>
<script type="text/javascript" id="ajax-js-extra">
/* <![CDATA[ */
var jztheme = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php"};
var jz_feedback_ajax = {"nonce":"d556c609fa"};
var jz_poster_ajax = {"nonce":"1d6bb85fa6","post_id":"16582"};
var _jz_js = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php","theme_url":"https://www.jztheme.com/wp-content/themes/jztheme","login_url":"/user/login","register_url":"/user/register","message_url":"https://www.jztheme.com/user/message","followed_btn":"\u5df2\u5173\u6ce8","follow_btn":"\u5173\u6ce8","webp":"","is_user_logged_in":"","current_user_id":"0","load_more_author_content_nonce":"3d6da354da"};
var _jz_js = {"ajaxurl":"https://www.jztheme.com/wp-admin/admin-ajax.php","theme_url":"https://www.jztheme.com/wp-content/themes/jztheme","login_url":"/user/login","register_url":"/user/register","message_url":"https://www.jztheme.com/user/message","followed_btn":"\u5df2\u5173\u6ce8","follow_btn":"\u5173\u6ce8","webp":"","is_user_logged_in":"","current_user_id":"0","comment_reply_nonce":"d9038f7486","comment_like_nonce":"310be702d3"};
//# sourceURL=ajax-js-extra
/* ]]> */
</script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/ajax.js" id="ajax-js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/tinymce@6.8.2/tinymce.min.js" id="tinymce-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/ask-answer.js" id="ask-answer-js"></script>
<script type="text/javascript" src="https://www.jztheme.com/wp-content/themes/jztheme/static/js/interaction.js" id="interaction-js"></script>
        <script>
            console.log("25/0.31845");
        </script>
        <script>
        (function(){
          var bp = document.createElement('script');
          var curProtocol = window.location.protocol.split(':')[0];
          if (curProtocol === 'https'){
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
          } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
          }
          var s = document.getElementsByTagName("script")[0];
          s.parentNode.insertBefore(bp, s);
        })();
        </script>

    </body>
</html>
<!-- Performance optimized by Redis Object Cache. Learn more: https://wprediscache.com -->