如何在Streamlit中从JavaScript向Python后端简单传递Token值

核心思路 #

利用Streamlit原生文本输入框作为中间载体，通过JS将Token赋值给隐藏的输入框并触发更新，Python端直接从st.session_state读取Token，无需开发自定义双向组件。

具体实现代码 #

import streamlit as st
import streamlit.components.v1 as components

# 初始化Token的session_state
if "auth_token" not in st.session_state:
    st.session_state.auth_token = ""

# 创建隐藏的文本输入框，用于接收前端Token
st.text_input("Auth Token", key="auth_token", label_visibility="hidden")

# 用CSS隐藏输入框，避免干扰页面
st.markdown("""
<style>
div[data-testid="stTextInput"] {
    display: none;
}
</style>
""", unsafe_allow_html=True)

# 后端处理Token逻辑
if st.session_state.auth_token:
    st.success(f"Token已获取: {st.session_state.auth_token[:10]}...")
    # 这里添加你的权限管控逻辑：比如验证Token有效性、获取用户角色等
else:
    st.info("等待认证Token...")

# 嵌入你的认证页面iframe
components.iframe("https://你的认证页面地址", height=500)

# 嵌入监听Token并传递的JS代码
components.html("""
<script>
// 监听来自iframe的消息
window.addEventListener('message', (event) => {
    // 验证消息来源，防范跨域风险
    if (event.origin !== 'https://你的认证页面域名') return;
    
    const token = event.data;
    if (token && typeof token === 'string') {
        // 定位到隐藏的文本输入框
        const tokenInput = document.querySelector('div[data-testid="stTextInput"] input');
        if (tokenInput) {
            // 设置输入框值并触发更新事件，让Streamlit同步到session_state
            tokenInput.value = token;
            tokenInput.dispatchEvent(new Event('input', { bubbles: true }));
        }
    }
});
</script>
""", height=0)

关键细节说明 #

• 跨域安全：一定要验证event.origin，只处理来自可信认证页面的消息，避免恶意跨域攻击。
• 输入框隐藏：通过CSS隐藏原生文本输入框，既利用了Streamlit的状态同步机制，又不影响页面UI。
• 状态同步：通过触发input事件，让Streamlit自动将输入框的值同步到st.session_state.auth_token，后端直接读取即可。

备选方案（非敏感场景可用） #

如果Token敏感度较低，也可以通过URL参数传递：

1. JS拿到Token后执行：window.location.search = new URLSearchParams({ token: token }).toString();
2. Python端读取：token = st.experimental_get_query_params().get("token", [""])[0]

注意：该方案会将Token暴露在URL中，不建议用于生产环境的敏感Token传递。

内容的提问来源于stack exchange，提问作者abdelgha4