Pull to refresh
0
0
Send message
скорее, своим сертификатом в списке доверенных в трафик зашифрованный другим сертификатом не получится влезть, тут скорее уже плагин для браузера нужен.
В условиях где код может работать не только по жестко указанным протоколам, но и быть универсальным. Как для проектов не озабоченных возможной подменой контента по http, так и для протоколов с шифрованием. При вводе, опять же, нового протокола не возникнет необходимости переписывать ссылки. Безопасность и особенности трафика от сервера до клиента — это сфера ответственности веб-сервера, где настроив желаемый протокол — отдаем данные, а дополнительно подгружаемые — работают по тому же протоколу, но это никак не ответственность кода (хотя как быстрое решение для данного случая вполне себе вариант, но не паттерн — слишком громко).
Только https — не обязательно, речь о том, что думать стоит не категориями шаблонов и анти-шаблонов, а понимать, что и для чего используется. Использование не явного указания на протокол — это не анитипаттерн, это возможность, которая может быть использована и быть полезной в определенных условиях.
В проекте надо явно указывать https при подгрузке сторонних ресурсов, а не использовать относительный URL без схемы src="//maps.google.com/...". Это уже давно антипаттерн.

Скорее проекты нужно показывать по https, что бы предотвратить подмену контента и вставку рекламы, а не обзывать явное или не явное указание протокола «не шаблоном».
Решение без использования JSX и Babel соответственно:

index.html
<link rel="stylesheet" href="app.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,800">
<div id="container">
  <div id="hook"></div>
  <h1>Play Music</h1>
  <input type="file" id="files" name="files[]" multiple />
</div>
<script crossorigin src="https://unpkg.com/react@15/dist/react.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
<script src="https://soulwire.github.io/sketch.js/js/sketch.min.js"></script>
<script src="app.js"></script>
<script type="text/javascript">
  'use strict';
  function PlayButton(props) {
    let className = props.isMusicPlaying ? 'play active' : 'play';
    return React.createElement('a', {href: "#", title: "Play video", onClick: props.onClick, "className": className}, null);
  }
  class Container extends React.Component{
    constructor(){
      super();
      this.state = {isMusicPlaying: false};
    }
    handleClick() {
      this.setState({ isMusicPlaying: !this.state.isMusicPlaying });
      this.state.isMusicPlaying ? this.audio.pause() : this.audio.play();
    };
    render(){
      let status = this.state.isMusicPlaying ? 'Playing :)' : 'Not playing :(';
      
      return React.createElement('div', null,
              React.createElement('h1', {onClick: this.handleClick.bind(this)}, status),
              PlayButton({isMusicPlaying: this.state.isMusicPlaying, onClick: this.handleClick.bind(this)}),
              React.createElement('audio', {id: "audio", ref: (audioTag) => { this.audio = audioTag } })
             );
    }
  }
  const placeWeWantToPutComponent = document.getElementById('hook');
  ReactDOM.render(React.createElement(Container), placeWeWantToPutComponent);
</script>

Information

Rating
Does not participate
Registered
Activity