Запретить инструментам разработки React изменять свойства / состояние
Есть ли способ предотвратить изменение свойств / состояний из внешнего интерфейса на продакшене?
Я пробовал следовать, но он полностью отключает инструменты разработчика:
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === 'object') {
for (let [ key, value ] of Object.entries(
window.__REACT_DEVTOOLS_GLOBAL_HOOK__
)) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] =
typeof value === 'function' ? () => {} : null;
}
}
Потому что вам нужны инструменты разработчика для изменения чего-либо во внешнем интерфейсе ... После того, как исходный код передан браузеру, сравнительно мало что можно сделать.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я использую следующий фрагмент кода в своем приложении Meteor, которое использует React 16.3 в качестве библиотеки пользовательского интерфейса.
window.__ALLOW_REACT_DEVTOOLS__ - это просто флаг, который я установил в HTML-коде SSR, отправленном с сервера, потому что эта строка кода должна исключать любой код React, и мне он нужен до того, как process.env станет доступным в браузере. На сервере я установил для этого значения false в процессе производства.
<script>
if (
!window.__ALLOW_REACT_DEVTOOLS__ &&
window.__REACT_DEVTOOLS_GLOBAL_HOOK__ &&
typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object"
) {
for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
}
}
delete window.__ALLOW_REACT_DEVTOOLS__;
</script>
Ключ к тому, чтобы эта работа работала, заключается в том, что она загружается ДО React.
Это полностью отключит React-Devtools. Когда вы нажимаете на вкладку devtools, он просто говорит 'Ищу React ...'.
Хорошо, нашел способ уберечь даже эту функцию от инъекции / вовлечения.
Я просто изменил код отключения на этот:
// отключаем react-dev-tools для этого проекта
if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ === "object") {
for (let [key, value] of Object.entries(window.__REACT_DEVTOOLS_GLOBAL_HOOK__)) {
window.__REACT_DEVTOOLS_GLOBAL_HOOK__[key] = typeof value == "function" ? ()=>{} : null;
}
}
Зашифровать? Я имею в виду, что когда что-то находится на клиенте (например, в браузере), это в значительной степени не в ваших руках.