Скрипт очистки кэша chrome
Обновлено: 07.07.2024
Я ищу способ программно очистить кеш браузера. Я делаю это, потому что приложение кэширует конфиденциальные данные, и я хотел бы удалить их, когда вы нажимаете «Выйти». Это произойдет либо через сервер, либо через JavaScript. Конечно, использование программного обеспечения на чужом / общедоступном компьютере по-прежнему не рекомендуется, поскольку существует больше опасностей, таких как клавиатурные шпионы, которые просто невозможно победить на программном уровне.
Возможно, вы можете просто использовать jQuery, чтобы заменить «метатег», который ссылается на состояние кэша, обработчиком / кнопкой события, а затем обновить, легко,
ПРИМЕЧАНИЕ. Это решение основано на кэше приложений, который реализован как часть спецификации HTML 5. Также требуется настройка сервера для настройки манифеста кэша приложений. Он не описывает метод, с помощью которого можно очистить «традиционный» кеш браузера с помощью клиентского или серверного кода, что практически невозможно сделать.
Используйте сам html. Есть один прием, который можно использовать. Этот прием заключается в добавлении параметра / строки к имени файла в теге сценария и изменении его при внесении изменений в файл.
Браузер интерпретирует всю строку как путь к файлу, даже несмотря на то, что идет после "?" параметры. Таким образом, теперь происходит то, что в следующий раз, когда вы обновите свой файл, просто измените номер в теге script на вашем веб-сайте (Пример <script src="https://question-it.com/questions/1447330/myfile.js?version=1.0.1"></script> ), и браузер каждого пользователя увидит, что файл изменился, и получит новую копию.
В Chrome вы должны сделать это, используя расширение для тестирования. Вам нужно запустить Chrome с помощью следующих переключателей:
В консоли Chrome теперь вы можете делать следующее:
Как видно из приведенных выше команд, он не только очищает кеш браузера, но также очищает кэш DNS и закрывает сетевые подключения. Это замечательно, когда вы проводите сравнение времени загрузки страницы. Очевидно, что вам не нужно использовать их все, если они не нужны (например, clearCache () должно быть достаточно, если вам нужно очистить только кеш и не заботиться о кеше DNS и соединениях).
Location.reload (истина ) ; сильно перезагрузит текущую страницу, игнорируя кеш.
Cache.delete () также можно использовать для новый хром, firefox и опера.
Лучше всего создать файл js с именем + некоторый хеш с версией, если вам нужно очистить кеш, просто сгенерируйте новые файлы с новым хешем, это заставит браузер загружать новые файлы
Первоначально я пробовал различные программные подходы в моем HTML, JS, чтобы очистить кеш браузера. На последнем Chrome ничего не работает.
Наконец, я закончил с .htaccess:
Протестировано в Chrome, Firefox, Opera
Теперь вы можете использовать Cache.delete ()
Работает на Chrome 40+, Firefox 39+, Opera 27+ и Edge.
Представьте, что .js файлы находятся в /my-site/some/path/ui/js/myfile.js
Поэтому обычно тег script выглядит так:
Теперь измените это на:
Теперь, конечно, это не будет работать. Чтобы это работало, вам нужно добавить одну или несколько строк в ваш .htaccess Важная строка: (весь .htaccess внизу)
Таким образом, это как бы удаляет 1111111111 из пути и ссылается на правильный путь.
Так что теперь, если вы вносите изменения, вам просто нужно изменить номер 1111111111 на любой номер, который вы хотите. И как бы вы ни включали свои файлы, вы можете установить это число с помощью отметки времени, когда js-файл был последний раз изменен. Так что кеш будет работать нормально, если число не меняется. Если он изменится, он будет обслуживать новый файл (ДА ВСЕГДА), потому что браузер получает полный новый URL и просто считает, что файл настолько новый, что он должен его получить.
Вы можете использовать это для CSS , favicons и всего, что когда-либо кэшируется. Для CSS просто используйте так
И это будет работать! Прост в обновлении, прост в обслуживании.
Если у вас нет .htaccess, то это минимум, который вам нужен:
Ни в коем случае браузер не позволит вам очистить кеш. Это было бы огромной проблемой безопасности, если бы это было возможно. Этим можно легко злоупотребить - минута, когда браузер поддерживает такую «функцию», будет минутой, когда я удаляю ее с моего компьютера.
Что вы можете сделать, так это запретить кэшировать вашу страницу, отправив соответствующие заголовки или используя эти метатеги:
Возможно, вы захотите отключить автозаполнение полей формы, хотя, боюсь, есть стандартный способ сделать это (см. этот вопрос).
Несмотря на это, я хотел бы отметить, что если вы работаете с конфиденциальными данными, вы должны использовать SSL. Если вы не используете SSL, любой, имеющий доступ к сети, может прослушивать сетевой трафик и легко видеть то, что видит ваш пользователь.
Использование SSL также заставляет некоторые браузеры не использовать кэширование, если явно не указано иное. См. этот вопрос.
Я ищу способ программно очистить кэш браузера. Я делаю это, потому что приложение кэширует конфиденциальные данные, и я хотел бы удалить их, когда вы нажимаете "выйти". Это произойдет либо через сервер, либо через JavaScript. Конечно, использование программного обеспечения на внешнем/общедоступном компьютере по-прежнему не рекомендуется, поскольку есть больше опасностей, таких как регистраторы ключей, которые вы просто не можете победить на программном уровне.
возможно, вы можете просто использовать jQuery для замены "мета-тега", который ссылается на состояние кэша с помощью обработчика событий / кнопки, а затем обновить, легко,
Примечание: это решение опирается на кэш приложений, реализованный как часть спецификации HTML 5. Он также требует настройки сервера для настройки манифеста кэша приложения. Он не описывает метод, с помощью которого можно очистить "традиционный" кэш браузера с помощью клиентского или серверного кода, который является почти невозможно сделать.
здесь не так браузер позволит вам очистить свой кэш. Это было бы огромной проблемой безопасности, если бы это было возможно. Это может быть очень легко злоупотреблять-в ту минуту, когда браузер поддерживает такую "функцию", я удалю ее с моего компьютера.
что ты можете do-это сказать ему, чтобы он не кэшировал вашу страницу, отправив соответствующие заголовки или используя эти мета-теги:
вы также можете рассмотреть возможность отключения автоматическое заполнение полей формы, хотя я боюсь, что есть стандартный способ сделать это (посмотреть здесь).
несмотря на это, я хотел бы отметить, что если вы работаете с конфиденциальными данными, вы должны использовать SSL. Если вы не используете SSL, любой человек с доступом к сети может нюхать сетевой трафик и легко видеть, что видит ваш пользователь.
использование SSL также делает некоторые браузеры не используйте кэширование, если явно не указано. Видеть этот вопрос.
использовать сам html.Есть один трюк, который можно использовать.Хитрость заключается в том, чтобы добавить параметр / строку к имени файла в теге сценария и изменить его при изменении файла.
<script src="https://codengineering.ru/q/myfile.js?version=1.0.0"></script>
браузер интерпретирует всю строку как путь к файлу, хотя что происходит после "?- это параметры. Так что теперь происходит то, что в следующий раз, когда вы обновляете свой файл, просто измените номер в теге скрипта на своем веб-сайте (пример <script src="https://codengineering.ru/q/myfile.js?version=1.0.1"></script> ) и каждый браузер пользователи смотрите файл изменился и возьмите новую копию.
лучшая идея - сделать генерацию JS-файлов с именем + некоторый хэш с версией, если вам нужно очистить кэш, просто создайте новые файлы с новым хэшем, это вызовет браузер для загрузки новых файлов
на Chrome, вы должны быть в состоянии сделать это с помощью расширения бенчмаркинга. Вам нужно запустить chrome со следующими переключателями:
в консоли Chrome теперь вы можете сделать следующее:
Как вы можете сказать из команд выше, он не только очищает кэш браузера, но и очищает кэш DNS и закрывает сетевые подключения. Они отлично подходят, когда вы делаете бенчмаркинг времени загрузки страницы. Очевидно, вы не должны использовать их все, если не необходимо (например, clearCache () должно быть достаточно, если вам нужно очистить только кэш и не заботиться о кэше DNS и подключениях).
расположение.перезагрузка (true); будет трудно перезагрузить текущую страницу, игнорируя кэш.
кэш.удалить() может также использоваться для новых chrome, firefox и opera.
p, blockquote 1,0,0,0,0 -->
p, blockquote 2,0,0,0,0 -->
Google Chrome
p, blockquote 3,0,0,0,0 -->
p, blockquote 4,0,0,0,0 -->
Рассмотрим оба варианта.
p, blockquote 5,0,0,0,0 -->
p, blockquote 6,0,0,0,0 -->
p, blockquote 7,0,0,0,0 -->
В самом низу нажмите «Показать дополнительные настройки»
p, blockquote 8,0,0,0,0 -->
p, blockquote 9,0,1,0,0 -->
Дальше идем в «Настройки контента» (кнопка расположена под заголовком пункта «Личные данные»).
p, blockquote 10,0,0,0,0 -->
p, blockquote 11,0,0,0,0 -->
В разделе «Файлы Cookies» укажите «Сохранять локальные данные только до закрытия браузера».
p, blockquote 12,0,0,0,0 -->
p, blockquote 13,0,0,0,0 -->
Для того, чтобы иметь возможность полностью настроить автоматическую очистку всей вашей приватной информации в Google Chrome, установите расширение Click&Clean.
p, blockquote 14,0,0,0,0 -->
После его установки в панели инструментов браузера появится дополнительный значок. Нажмите по нему и во всплывающем меню выберите «Настройки».
p, blockquote 15,0,0,0,0 -->
p, blockquote 16,0,0,0,0 -->
В самом верху вы можете указать какие данные необходимо подчищать. Ниже поставьте галочку у пункта «Запускать очистку при закрытии Хрома».
p, blockquote 17,0,0,0,0 -->
p, blockquote 18,1,0,0,0 -->
Mozilla Firefox
p, blockquote 19,0,0,0,0 -->
В Firefox встроены все необходимые настройки, чтобы включить автоматическую очистку всех данных — никаких дополнительных расширений не потребуется.
Откройте меню Firefox и выберите пункт «Настройки».
p, blockquote 20,0,0,0,0 -->
p, blockquote 21,0,0,0,0 -->
Нажмите иконку «Приватность» и выберите во всплывающем меню Firefox «Будет использовать ваши настройки хранения истории».
p, blockquote 22,0,0,0,0 -->
p, blockquote 23,0,0,0,0 -->
Поставьте галочку «Очищать историю при закрытии Firefox». Нажав на кнопку «Параметры» можно указать выборочно только те данные, чистка которых будет происходить.
p, blockquote 24,0,0,0,0 -->
p, blockquote 25,0,0,0,0 -->
Internet Explorer
p, blockquote 26,0,0,0,0 -->
Для того, чтобы настроить автоматическую очистку в Internet Explorer откройте «Свойства обозревателя» из меню «Сервис».
p, blockquote 27,0,0,1,0 -->
p, blockquote 28,0,0,0,0 -->
Находясь на вкладке «Общие» поставьте галочку у пункта «Удалить журнал обозревателя при выходе». Чтобы выборочно настроить какие данные необходимо очищать, нажмите кнопку «Удалить».
p, blockquote 29,0,0,0,0 -->
p, blockquote 30,0,0,0,0 -->
Opera
p, blockquote 31,0,0,0,0 -->
p, blockquote 32,0,0,0,0 -->
p, blockquote 33,0,0,0,0 -->
p, blockquote 34,0,0,0,0 -->
p, blockquote 35,0,0,0,0 -->
Нажмите меню «История» и выставьте галочку «Очищать при выходе». Вы также можете указать цифру «0» в поле «Помнить адресов», чтобы запретить браузеру хранить историю посещаемых вами сайтов.
Статья состоит из двух частей: теоретической и практической.
В теоретической части мы кратко рассмотрим карту импортов и более подробно Clear-Site-Data .
В практической части мы поднимем два сервера — один будет запускаться локально и, помимо прочего, обслуживать статические файлы нашего приложения, другой мы развернем на Heroku . Сначала мы запросим данные (включая куки) от серверов, сохраним эти данные в браузере с помощью трех наиболее популярных механизмов (локальное хранилище, индексированная база данных и интерфейс кеширования), затем попробуем очистить их с помощью заголовков Clear-Site-Data . Для разрешения путей импортируемых в приложении модулей мы будем использовать карту импортов.
Исходный код проекта находится здесь.
Ресурсы
О механизмах для хранения данных на стороне клиента, которые мы будем использовать в приложении, я рассказывать не буду. Вот ссылки на отличные ресурсы, посвященные каждому из них:
Инструменты
При разработке приложения мы будем использовать несколько инструментов, основными из которых являются следующие:
Теория
Карта импортов
Карта импортов (imports map) позволяет использовать так называемые голые спецификаторы импорта (bare import specifiers) в инструкциях import и выражениях import() без участия сборщиков типа Webpack или других инструментов для разрешения путей импортируемых модулей во время выполнения кода.
Предположим, что в нашем проекте используются библиотека lodash и утилита very-simple-fetch :
Для того, чтобы импортировать эти модули без помощи "бандлера", необходимо указать полный путь к соответствующим файлам, хранящимся в директории node_modules :
Карта импортов позволяет связать кастомные ключи — названия модулей — с их расположением. Для этого в теге <script> с типом importmap определяется объект с ключом imports и парами ключ / значение, где значение — это путь к модулю, а ключ — синоним (алиас) для этого пути:
После определения карты импортов, у нас появляется возможность импортировать наши модули следующим образом:
Карты импортов также предоставляют много других интересных возможностей. К сожалению, в настоящее время они поддерживаются только Chrome . Если вы пользуетесь другим агентом, при разработке приложения в практической части статьи импортируйте модули напрямую из node_modules .
Clear-Site-Data
Данный заголовок принимает следующие директивы:
Директивы могут указываться как по одной:
так и через запятую:
Последний пример аналогичен следующему:
К сожалению, в настоящее время данный заголовок не поддерживается Safari (ох уж этот современный IE :)).
Вот как это должно работать в теории. Скоро мы выясним, что на практике это работает немного по-другому, а кое-что и вовсе не работает.
Практика
Фронтенд и локальный сервер
Создаем директорию для проекта, переходим в нее, инициализируем проект и устанавливаем зависимости:
Создаем файл server.js для локального сервера и директорию public для статических файлов, а в ней файлы index.html , style.css и script.js :
Не забудьте создать файл .gitignore с node_modules .
Начнем с public/index.html . Создаем контейнер для UI и секцию с кнопками для взаимодействия с локальным сервером:
Обратите внимание на атрибуты data-action кнопок. Это небольшая хитрость позволит нам сильно упростить и сократить код скрипта. А по классам, вы, наверное, догадались, какой CSS-фреймворк мы используем для стилизации.
Добавляем карту импортов для модулей very-simple-fetch и idb :
Честно говоря, поиск нужного файла в директории node_modules — занятие не из приятных. К тому же приходится искать не просто основной файл, но нужную версию файла. Например, ES-модуль idb хранится в директории esm .
Подключаем наш скрипт с типом module :
С вашего позволения файл со стилями style.css я пропущу.
Переходим к public/script.js .
Давайте подумаем, что должен делать наш скрипт.
Вот мои идеи на этот счет:
- записать данные в локальное хранилище
- записать данные в индексированную БД
- записать данные в кеш с помощью Cache API
- получить куки от локального сервера
- при нажатии кнопки отправлять на сервер запрос, в ответ на который сервер будет устанавливать заголовок Clear-Site-Data с соответствующей директивой.
Приступим к реализации ( // -> — означает сигнатуру):
Обратите внимание на то, как мы формируем URL запроса. Мы добавляем к адресу сервера значение атрибута data-action кнопки. Это первая половина хитрости.
Теперь займемся сервером ( server.js ).
Что он должен делать?
Я хочу, чтобы он делал следующее:
Мы передаем клиенту куки вместе с загружаемыми модулями. Получается, что мы делаем это дважды, но это не критично. Поскольку у нас один домен и названия куки совпадают, мы в итоге получим только одно куки.
Обратите внимание на то, как мы извлекаем тип операции — директиву для Clear-Site-Data — из тела запроса. Мы разбиваем строку в массив по символу - и извлекаем второй элемент (элемент по индексу 1). Таким образом, если сервер получил clear-storage , то типом операции (директивой) будет storage .
Также обратите внимание на то, что директива должна быть закавычена, причем кавычки обязательно должны быть двойными ( " ).
Пришло время запустить сервер и убедиться в том, что все работает.
Добавляем в файл package.json команду для запуска сервера для разработки:
Выполняем эту команду в терминале:
Открываем инструменты разработчика, переходим в раздел Application (“Приложение”) и проверяем, что все наши данные успешно сохранены в браузере:
Видим, что данные из локального хранилища, индексированной БД и локального кеша были успешно удалены.
Кажется, что все хорошо, однако нажатие кнопки Reload contexts приводит к возникновению ошибки:
Текст ошибки говорит нам о том, что браузер не может распознать тип операции (тип данных для очистки).
Дело в том, что директива "executionContexts" в настоящее время поддерживается только Samsung Internet , т. е. можно сказать, что не поддерживается. В сети можно найти информацию о том, что данная директива, скорее всего, будет удалена из спецификации.
Дальше интересней: нажатие кнопки Clear all site data также приводит к ошибке:
Хотя должно приводить к очистке данных всех типов.
Здесь мы имеем дело с багом Chrome . Вот все, что мне удалось найти по данному багу. Кажется, в ближайшее время никто не собирается его фиксить.
В Firefox это работает:
Кажется, что эти директивы правильно интерпретируются браузером, т. е. приводят к очистке данных указанного типа.
Но что насчет определения принадлежности данных к источнику ответа перед их очисткой? Для того, чтобы убедиться в том, что удаляются только такие данные необходимо поднять еще один сервер. Для чистоты эксперимента развернем этот сервер на Heroku .
Удаленный сервер
Начнем с самого сервера. Создаем для него директорию, переходим в нее, инициализируем проект и устанавливаем зависимости:
Определяем команду для запуска сервера в package.json :
Создаем файл index.js следующего содержания:
- origin — заголовок Access-Control-Allow-Origin
- credentials — заголовок Access-Control-Allow-Credentials
- allowHeaders — заголовок Access-Control-Allow-Headers
Без этих настроек и еще одной на клиенте мы не сможем получить куки от "удаленного" сервера.
Для того, чтобы иметь возможность разворачивать приложения на Heroku , необходимо создать там аккаунт, а также глобально установить heroku-cli :
Инициализируем репозиторий и добавляем в него файлы приложения:
Создаем проект на Heroku :
Проверяем, что наш проект привязан к Heroku-проекту, и отправляем файлы:
Полную инструкцию по деплою приложения на Heroku можно найти здесь.
Добавляем в public/index.html раздел с кнопками для взаимодействия с удаленным сервером:
И вносим несколько изменений в public/script.js :
В разделе Application находим кешированные данные и куки от heroku:
И это не баг Chrome (или баг не только Chrome ), точно такой же результат мы получаем в Firefox :
Директива * также не удаляет кешированные данные, полученные от heroku:
К сожалению, по этой проблеме информации найти не удалось. Если вдруг вы знаете, в чем дело, пожалуйста, сообщите в комментариях.
Вывод
Итак, что мы имеем в сухом остатке?
Карта импортов в настоящее время поддерживается только Chrome . Будет ли она поддерживаться другими браузерами, и, если будет, когда это произойдет, неизвестно. Поэтому, несмотря на интересные возможности, использовать ее при разработке реальных приложений пока нельзя.
Что касается заголовка Clear-Site-Data , то, в целом, он неплохо справляется со своей задачей, однако тот факт, что он не поддерживается Safari , а также учитывая баг в Chrome и не очень понятное поведение браузеров по очистке кешированных данных, говорить о возможности его использования в продакшне также преждевременно.
Читайте также: