fetch 不发送自动填充的输入

Posted 2023-02-27

【中文标题】fetch 不发送自动填充的输入

【英文标题】：fetch doesn't send autofilled input

【发布时间】：2021-04-16 11:20:54

【问题描述】：

当我的浏览器 (chrome) 预填充我的登录凭据时，我的 fetch 函数不会发送值

html

 <div class='login-frame'>
    <h3>Bienvenue</h3>
    <div class='form'>
        <div class='input-handler'>
            <label for='login'>Login</label>
            <input type='text' id='login' name='login' autocomplete='on'>
        </div>
        <br>
        <div class='input-handler'>
            <label for='pass'>Mot-de-passe</label>
            <input type='password' id='pass' name='pass' autocomplete='on'>
        </div>
        <br>
        <button id='loginbutton'>CONNEXION</button>
    </div>
</div>

JS

window.onload = function() 
var pass = document.getElementById('pass'),
    login = document.getElementById('login'),
    loginButton = document.getElementById('loginbutton');

loginbutton.onclick = (e)=> 
    var creds = 
        login: login.value,
        pass: pass.value
    
    
    fetch('functions/log.php', 
        method: "POST",
        header: "Content-type": "application/json; charset=UTF-8",
        body: JSON.stringify(creds)
    );

PHP

$pos = json_decode(file_get_contents('php://input', true));
echo var_dump($pos);

如果我输入任何内容，它就会返回

object(stdClass)#3 (2) [“登录”]=>

字符串(3) "qfz"

[“通过”]=>

字符串(5) "zfqzf"

如果我使用浏览器预填充，它会返回

空

【问题讨论】：

我猜这可能是某种安全功能，以防止第 3 方脚本轻易窃取凭据。这周围有实际的form 吗？如果是这样，如果你绑定到它的提交事件，事情会改变吗？

不，没有表格。我不认为这是必要的，因为我知道我将要使用 xhr 的东西。你关于安全的想法很有趣。您认为我需要输入适当的表格才能使其正常工作？

这只是一个建议，我接下来要测试什么，不能说这是否有效。有关安全问题的更多信息：thehackernews.com/2017/01/browser-autofill-phishing.html、securesense.ca/…

【参考方案1】：

这是一个错误，

正如@CBroe 所说，这是一个安全问题。将我的 html 更改为适当的形式使其可以正常工作

<form class='login-frame' method='post' action='#'>
    <div class='login-logo'><img src='bs/img/logo_b.svg'></div>
    <h3>Bienvenue</h3>
    <div class='form'>
        <div class='input-handler'>
            <label for='login'>Login</label>
            <input type='text' id='login' name='login' autocomplete='on'>
        </div>
        <br>
        <div class='input-handler'>
            <label for='pass'>Mot-de-passe</label>
            <input type='password' id='pass' name='pass' autocomplete='on'>
        </div>
        <br>
        <button type='submit' id='loginbutton'>CONNEXION</button>
    </div>
</form>