悪意のある盗難やクローリングを回避するために、ネイキッド インターフェイスに保護層を追加します_html/css_WEB-ITnose

WEB アプリケーションはオープンであり、バックエンドと対話するためのインターフェイスが特別に処理されていない場合 (暗号化/トークン)、公開されます。 APIアドレスさえ分かれば簡単にアプリケーションデータを取得できます。このようにして、アプリケーション データが簡単にクロールされたり、典型的なテキスト メッセージが悪意を持って盗まれたりする可能性があります。

同社の金融商品の SMS インターフェースは、携帯電話番号が必要な限り、自由に盗むことができます。 IP アドレスですが、それでも十分ではありません。その後、一定期間内に一定数のリクエストがあったトークンが追加されました。その後の観察では、基本的にスワイプされた形跡がないことがわかり、新しいメカニズムが依然として大きな役割を果たしていることがわかりました。もちろん、このメカニズムはテキスト メッセージの盗難を防ぐために使用されるだけでなく、裸のインターフェイスを保護するためにも使用できます。

Web ページがリクエストされると、バックエンドは特定のアルゴリズムに従ってトークンをページに挿入し、フロントエンドは対応するルールを通じてトークンを取得し、それを持ち込むことができます。インターフェイス データを要求すると、トークンはバックエンドで検証され、検証に合格した場合は通常どおりデータを要求できます。ネイティブ アプリの場合、暗号化されたメソッドを介してインターフェイスをリクエストしてトークンを取得できます。最も簡単かつ直接的な方法は、ネイティブ アプリ クライアントが文字列とタイムスタンプ (バックエンドから取得) を使用して暗号化し、リクエストを行うことです。バックエンド インターフェイス。データが復号化され、タイムスタンプが比較され、一定期間内で有効であると見なされます (暗号化された情報の傍受を避けるため、タイムスタンプの検証が追加されます)。それにより、トークンが取得されます。

もちろん、Web アプリケーションは公開されており、理論的にはすべてのソース コードが利用可能です。そのため、バックエンドがトークンを Web ページに挿入する方法もクラックされる可能性があります。そのため、バックエンドがトークンをリクエストに挿入したり、クラックの難易度を高めるために一連のアルゴリズムを独自に実装したりするなど、バックエンドがトークンを挿入する方法をカスタマイズできます。 。

複数のプロジェクトでの再利用を容易にするために、このメカニズムを独立した npm パッケージ access-token-api に編成します。

使用例:

npm install access-token-api//server(nodejs)  端var accessTokenApi = require('access-token-api');var TokenApi = new accessTokenApi({    webTokenVarName:'encrypt_api_tokenStr',//前端可通过webTokenVarName变量去到token值，默认encrypt_api_tokenStr});//web前端取token值window[webTokenVarName] //请求接口时带上这个值就能进行token校验了

メインインターフェース

トークン生成 api 発行検証トークン api verifytoken 有効回数が 1 つ減ります API ディクサーバーがトークンをWeb フロントエンド ページ API webInject

バックエンドが Web フロントエンド ページにトークンを挿入する方法をカスタマイズします。

var TokenApi = new accessTokenApi({    webInject:function(html,token,callback){    var htmlEndIndex = html.indexOf('</html>');      var tokenScript = '<script>window.' + this.config.webTokenVarName + '=' + token + '</script>';      var prevHtml = html.substring(0,htmlEndIndex);      var nextHtml = html.substr(htmlEndIndex);       prevHtml += tokenScript;      prevHtml += nextHtml;      callback(null,prevHtml);    }});

プロジェクトアドレス https://github.com/navyxie /access-token-api には、Express フレームワークと Sails フレームワークの使用例が含まれており、他の人にインスピレーションを与えます。