Доказательство дисплея

Question

меня попросили реализовать «доказательство отображения» в веб-приложения ...

Это означает, что мне нужно, так или иначе, получить скриншот того, что или будет отображаться (или закрыть) клиенту в его браузере, чтобы доказать, что мы дали ему то, что ему было необходимо, как «юридические» доказательства.

Даже если я не согласен с таким доказательством (браузер имеет свой собственный способ отображения HTML, сохраненный скриншот можно легко взломать или подделать ...), интересно, было ли это уже сделано где-то и как реализовать такую ​​функциональность.

Любая идея или опыт?

Чтобы сделать это проще, мы не можем попросить пользователя установить что-либо (подключаемые модули, приложения, ...)
Используемые технологии: в основном Java, Spring MVC,-Thymeleaf и JQuery

Answer 1

ОК, здесь находятся 2 решения:

Одна сторона сервера: захватить поток HTML перед его отправкой в ​​браузер с помощью фильтра клиента:

public class ProofDisplayFilter implements Filter { 
     @Override 
     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws ServletException { 

      HttpServletRequest request = (HttpServletRequest) req; 
      HttpServletResponse response = (HttpServletResponse) res; 

      Mywriter writer = ...; 
      ProofWriter proofWriter = new ProofWriter(response.getWriter(), writer); 

       //doFilter will right in the proofWriter that will copy output flow 
       chain.doFilter(request, wrapResponse(response, proofWriter)); 

       //do whatever you need with your copy 
       saveHTMLAndStaticContentAsZip(proofWriter); 
     } 

     private static HttpServletResponse wrapResponse (final HttpServletResponse response, final PrintWriter writer){ 
       return new HttpServletResponseWrapper(response) { 
        public PrintWriter getWriter() throws IOException { 
         return writer; 
        } 
       }; 
     } 
    } 

Дело в том, что вам нужно измените поток HTML, чтобы получить хорошую ссылку на js, css и ресурсы изображения.

Одна сторона клиента: (Спасибо @NimChimpsky) используйте html2canvas.JS API для создания снимка и отправить его в контроллер в качестве изображения:

JS

html2canvas(document.body, { 
       onrendered: function(canvas) { 
        $.post('/myApp/proof', 
          { 
           image : canvas.toDataURL() 
          }, 
          function(data) {...}); 
       } 
      }); 

CONTROLLER

@RequestMapping(value = "/proof") 
    @ResponseBody 
    public void proof(@RequestParam(value="image") String imageBase64) throws IOException { 
     long now = Calendar.getInstance().getTimeInMillis(); 
     byte[] bytes = imageBase64.replaceAll("data:image/.+;base64,", "").getBytes(); 

     File proof = new File("./proof", "display-"+now+".jpeg"); 

     if(!proof.exists()){ 
      Files.createParentDirs(proof); 
     } 
     Files.write(DECODER.decode(bytes), proof); 
} 

(Или что-нибудь еще, что нужно сделать с этим изображение)

Оба решения имеют за и против:
стороне сервера:
ПРОФИ
- Захват HTML, как это
- возможность обработки/сравнения HTML поток
CONS
- Мы не знаем, как он был показан клиенту
- Потребляйте много места на диске: ~ 1Mo/capture (необходимо также сохранить статические файлы)
- А как насчет части страницы с именем AJAX?

стороне клиента:
ПРОФИ
- Precise: установить скрипт на страницах, которые нуждаются в этом
- Управление рендеринга браузера
Cons
- использовать HTML5 холст, который не поддерживается в IE до 9-й версии.
- Intrusive (на мой взгляд)

Надеясь, это может помочь someonelse.
Спасибо за вашу поддержку!

Answer 2

Вы можете использовать Selenium Webdriver, чтобы сделать скриншоты и сохранить их на локальном диске. Посмотрите на этот вопрос: How take screenshot using selenium webdriver with java.

Но опять же это может быть использовано только как инструмент автоматического тестирования для управления пользовательскими действиями в системе без каких-либо взаимодействий с пользователем. В нашем проекте также используется тот же самый технологический стек, который вы упомянули, и команда тестирования использует веб-редактор Selenium, чтобы сделать скриншоты определенных условий, чтобы убедиться, что это работает.

Обычно это делается путем выбора и проверки элемента id и tag на странице html, загруженной с помощью селекторов Xpath. И это сделает снимок экрана об ошибках и условиях успеха в отдельной папке, настроенной в исполняемом java-коде. Затем он создает документ Excel «на лету», чтобы показать выполняемые задачи и результаты этих задач.