Архивы WEB - Страница 6 из 54

YII2: Bad Request (#400) Unable to verify your data submissionYII2:

18.09.2023 Павел Грибов WEB

Такая ошибка:

Bad Request (#400) Unable to verify your data submissionYII2

может возникнуть при принудительном вызове формы с POST или GET параметрами со страницы сайта. Например:

    <form id="TheFormRoute" method="post" action="?r=site%2Fls_route_report" target="Маршруты доставки">
        <input type="hidden" id="f_count_ls" name="f_count_ls" value="" />
        <input type="hidden" id="f_route_id" name="f_route_id" value="" />
        <input type="hidden" id="f_route_name" name="f_route_name" value="" />
        <input type="hidden" id="f_period" name="f_period" value="" />
        <input type="hidden" id="f_area" name="f_area" value="" />
        <input type="hidden" id="f_area_name" name="f_area_name" value="" />
        <input type="hidden" id="f_ls_list" name="f_ls_list" value="" />
    </form>

</form>

В контроллере сайта код вида :

    public function actionLs_route_report()    {
      Yii::$app->controller->enableCsrfValidation = false;
      return $this->render('route_report');  
    }

public function actionLs_route_report() {

Yii::$app->controller->enableCsrfValidation = false;

return $this->render('route_report');

}

Как раз и приведет к подобной ошибке:

Это своеобразная защита фреймворка от потенциального флуда. Вариантов решения несколько:

Отключить проверку CSRF глобально:

    'components' => [
        'request' => [
            'enableCsrfValidation' => false,
        ],

'components' => [

'request' => [

'enableCsrfValidation' => false,

Отключить проверку для конкретного контроллера:

class SiteController extends Controller
{
    
    public function beforeAction($action){ 
        $this->enableCsrfValidation = false; 
        return parent::beforeAction($action); 
    }    
    
    public function actionLs_route_report()    {
      return $this->render('route_report');  
    }

class SiteController extends Controller

{

public function beforeAction($action){

$this->enableCsrfValidation = false;

return parent::beforeAction($action);

}

public function actionLs_route_report() {

return $this->render('route_report');

}

Или воспользоваться ПРАВИЛЬНЫМ по мнению фреймворка методом:

    <form id="TheFormRoute" method="post" action="?r=site%2Fls_route_report" target="Маршруты доставки">
        <input id="form-token" type="hidden" name="<?=Yii::$app->request->csrfParam?>" value="<?=Yii::$app->request->csrfToken?>"/>
        <input type="hidden" id="f_count_ls" name="f_count_ls" value="" />
        <input type="hidden" id="f_route_id" name="f_route_id" value="" />
        <input type="hidden" id="f_route_name" name="f_route_name" value="" />
        <input type="hidden" id="f_period" name="f_period" value="" />
        <input type="hidden" id="f_area" name="f_area" value="" />
        <input type="hidden" id="f_area_name" name="f_area_name" value="" />
        <input type="hidden" id="f_ls_list" name="f_ls_list" value="" />
    </form>

<input id="form-token" type="hidden" name="<?=Yii::$app->request->csrfParam?>" value="<?=Yii::$app->request->csrfToken?>"/>

</form>

Оставить комментарий csrfParam, php, yii2

Синхронный запрос через fetch

06.09.2023 Павел Грибов WEB

Да, знаю, плохо, отвратительно и всё такое. Но иногда нужно. Например мне понадобилось при написании Service Worker, для возможности подмены запрашиваемого для загрузки url.. Реализовал так:

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    (async () => {
        res=await postData("woodpecker.php", { "url": event.request.url});
    })();
    console.log("--получили ответ");
    if (res.error===false){
        console.log("Отдаём URL");
        if ( event.request.url.endsWith( '.png' ) ) {
           return event.respondWith(
             fetch( 'm.jpg' )
           );
         }        
    } else {
        return event;
    };
            
});

async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), 
  });
  return await response.json();
}

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

(async () => {

res=await postData("woodpecker.php", { "url": event.request.url});

})();

console.log("--получили ответ");

if (res.error===false){

console.log("Отдаём URL");

if ( event.request.url.endsWith( '.png' ) ) {

return event.respondWith(

fetch( 'm.jpg' )

);

}

} else {

return event;

};

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data),

});

return await response.json();

}

Оставить комментарий javascript, ServiceWorker, sync fetch

Map api yandex: иконка кластера в виде круговой диаграммы

06.09.2023 Павел Грибов WEB

Задача: отобразить на карте иконки кластеров в виде диаграммы построенной на основании сумм неких значений

Решение:

Используя библиотеку PieChartGD.php создадим файл вывода картинки (PHP):

<?php
include_once '../../SamChristy/PieChart/PieChartGD.php';

use SamChristy\PieChart\PieChartGD;

$chart = new PieChartGD(300, 300);

$chart->setLegend(false);

$sausages_6=$_GET["sausages_6"];
$sausages_6_12=$_GET["sausages_6_12"];
$sausages_more_12=$_GET["sausages_more_12"];

$max=$sausages_6+$sausages_12+$sausages_more_12;
$pers_6=round($sausages_6*100/$max);
$pers_6_12=round($sausages_6_12*100/$max);
$pers_more_12=round($sausages_more_12*100/$max);

$chart->addSlice('sausages_6', $pers_6, '#0a9b0e');
$chart->addSlice('sausages_6_12',    $pers_6_12, '#f3a61f');
$chart->addSlice('sausages_more_12',$pers_more_12, '#f31f1f');

$chart->draw();
$chart->outputPNG();

<?php

include_once '../../SamChristy/PieChart/PieChartGD.php';

use SamChristy\PieChart\PieChartGD;

$chart = new PieChartGD(300, 300);

$chart->setLegend(false);

$sausages_6=$_GET["sausages_6"];

$sausages_6_12=$_GET["sausages_6_12"];

$sausages_more_12=$_GET["sausages_more_12"];

$max=$sausages_6+$sausages_12+$sausages_more_12;

$pers_6=round($sausages_6*100/$max);

$pers_6_12=round($sausages_6_12*100/$max);

$pers_more_12=round($sausages_more_12*100/$max);

$chart->addSlice('sausages_6', $pers_6, '#0a9b0e');

$chart->addSlice('sausages_6_12', $pers_6_12, '#f3a61f');

$chart->addSlice('sausages_more_12',$pers_more_12, '#f31f1f');

$chart->draw();

$chart->outputPNG();

Далее создадим функцию отображения кластера (JavaScript):

function SetClusterProp(ob){
    console.log("-настраиваю иконки кластера");

   ob.clusters.options.set({
        gridSize: 800,
        groupByCoordinates: true,
        clusterDisableClickZoom: true,
        clusterIcons: [{
            href: 'images/m1.png',
            size: [50, 50],            
            offset: [-25, -25]
        }]
    });
    ob.clusters.events.add('click', function (e) {
          console.log("Кликнули по кластеру");
          click_cluster = e.get('target');//.state.get('activeObject')
    });
    ob.clusters.events.add('add', function (e) { 
       var cluster = ob.clusters.getById(e.get('objectId')),
        objects = cluster.properties.geoObjects;
        if (objects.length >= 20 && objects.length < 100) {       
            dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;
            for (var i = 0; i < objects.length; i++) {
              dz=dz+objects[i].properties.dz;
              sausages=sausages+objects[i].properties.sausages;
              sausages_6=sausages_6+objects[i].properties.sausages_6;
              sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;
              sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;
            };            
            ob.clusters.setClusterOptions(cluster.id, {
                clusterIcons: [{
                    href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,
                    size: [45, 45],            
                    offset: [-22.5, -22.5]
                }]
            });
        }
        if (objects.length >= 100 && objects.length < 1000) {       
            dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;
            for (var i = 0; i < objects.length; i++) {
              dz=dz+objects[i].properties.dz;
              sausages=sausages+objects[i].properties.sausages;
              sausages_6=sausages_6+objects[i].properties.sausages_6;
              sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;
              sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;
            };
            ob.clusters.setClusterOptions(cluster.id, {
                clusterIcons: [{
                    href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,
                    size: [55, 55],            
                    offset: [-22.5, -22.5]
                }]
            });
        }
        if (objects.length >= 1000) {       
            dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;
            for (var i = 0; i < objects.length; i++) {
              dz=dz+objects[i].properties.dz;
              sausages=sausages+objects[i].properties.sausages;
              sausages_6=sausages_6+objects[i].properties.sausages_6;
              sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;
              sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;
            };                   
            ob.clusters.setClusterOptions(cluster.id, {
                clusterIcons: [{
                    href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,
                    size: [65, 65],            
                    offset: [-22.5, -22.5]
                }]
            });
        }

    });        
  return ob;
}

function SetClusterProp(ob){

console.log("-настраиваю иконки кластера");

ob.clusters.options.set({

gridSize: 800,

groupByCoordinates: true,

clusterDisableClickZoom: true,

clusterIcons: [{

href: 'images/m1.png',

size: [50, 50],

offset: [-25, -25]

}]

});

ob.clusters.events.add('click', function (e) {

console.log("Кликнули по кластеру");

click_cluster = e.get('target');//.state.get('activeObject')

});

ob.clusters.events.add('add', function (e) {

var cluster = ob.clusters.getById(e.get('objectId')),

objects = cluster.properties.geoObjects;

if (objects.length >= 20 && objects.length < 100) {

dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;

for (var i = 0; i < objects.length; i++) {

dz=dz+objects[i].properties.dz;

sausages=sausages+objects[i].properties.sausages;

sausages_6=sausages_6+objects[i].properties.sausages_6;

sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;

sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;

};

ob.clusters.setClusterOptions(cluster.id, {

clusterIcons: [{

href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,

size: [45, 45],

offset: [-22.5, -22.5]

}]

});

}

if (objects.length >= 100 && objects.length < 1000) {

dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;

for (var i = 0; i < objects.length; i++) {

dz=dz+objects[i].properties.dz;

sausages=sausages+objects[i].properties.sausages;

sausages_6=sausages_6+objects[i].properties.sausages_6;

sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;

sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;

};

ob.clusters.setClusterOptions(cluster.id, {

clusterIcons: [{

href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,

size: [55, 55],

offset: [-22.5, -22.5]

}]

});

}

if (objects.length >= 1000) {

dz=0;sausages=0;sausages_6=0;sausages_6_12=0;sausages_more_12=0;

for (var i = 0; i < objects.length; i++) {

dz=dz+objects[i].properties.dz;

sausages=sausages+objects[i].properties.sausages;

sausages_6=sausages_6+objects[i].properties.sausages_6;

sausages_6_12=sausages_6_12+objects[i].properties.sausages_6_12;

sausages_more_12=sausages_more_12+objects[i].properties.sausages_more_12;

};

ob.clusters.setClusterOptions(cluster.id, {

clusterIcons: [{

href: 'images/pie.php?sausages='+sausages+"&sausages_6="+sausages_6+"&sausages_6_12="+sausages_6_12+"&sausages_more_12="+sausages_more_12,

size: [65, 65],

offset: [-22.5, -22.5]

}]

});

}

});

return ob;

}

И перед началом отрисовки меток, настроим кластеризацию:

 // настройки кластеризакции
    objectManager = new ymaps.ObjectManager({
        gridSize: 120,
        clusterDisableClickZoom: true,
        geoObjectOpenBalloonOnClick: true,
        minClusterSize: 2,
        showInAlphabeticalOrder: false,
        viewportMargin: 128,
        zoomMargin: 0,         
        clusterize: true
    }); //кластеризуем
          
    objectManager=SetClusterProp(objectManager);        
    myMap.geoObjects.add(objectManager);        
...
objectManager.add(массив_объектов);

// настройки кластеризакции

objectManager = new ymaps.ObjectManager({

gridSize: 120,

clusterDisableClickZoom: true,

geoObjectOpenBalloonOnClick: true,

minClusterSize: 2,

showInAlphabeticalOrder: false,

viewportMargin: 128,

zoomMargin: 0,

clusterize: true

}); //кластеризуем

objectManager=SetClusterProp(objectManager);

myMap.geoObjects.add(objectManager);

...

objectManager.add(массив_объектов);

В результате получим что-то вроде:

Оставить комментарий map api yandex, диаграмма, иконка кластера, карты

JavaScript: перехват всех http/https запросов страницы

04.09.2023 Павел Грибов WEB

Прилетела задача перехватить URL всех загрузок тайлов на странице с размещенной Яндекс картой. В принципе если бы был простой случай, то всё решилось бы созданием прототипа для функции XMLHttpRequest , что-то в духе:

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {
    this.addEventListener("readystatechange", function(event) {  
    if(this.readyState == 4){
       var self = this;
       var response = {
         method: method,
         uri: uri,
         responseText: self.responseText
      };
      console.log(response);  
    } else {
        console.log(this.readyState);
    }
    }, false);
  open.call(this, method, uri, async, user, pass);
};

var open = XMLHttpRequest.prototype.open;

XMLHttpRequest.prototype.open = function(method, uri, async, user, pass) {

this.addEventListener("readystatechange", function(event) {

if(this.readyState == 4){

var self = this;

var response = {

method: method,

uri: uri,

responseText: self.responseText

};

console.log(response);

} else {

console.log(this.readyState);

}

}, false);

open.call(this, method, uri, async, user, pass);

};

Но возник один нюанс, карта располагается в iframe, а прототипы «вниз» не распространяются. Единственным способом осталось написать сервис Service Worker, который будет отлавливать все запросы..

На странице добавляем функцию загрузки сервиса:

<script>
console.log("пробуем зарегистрировать Service Worker");    
if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}
</script>

console.log("пробуем зарегистрировать Service Worker");

if ('serviceWorker' in navigator) {

window.addEventListener('load', function() {

navigator.serviceWorker.register('/sw.js',{}).then(function(registration) {

console.log('ServiceWorker registration successful with scope: ', registration.scope);

}, function(err) {

console.log('ServiceWorker registration failed: ', err);

});

}

</script>

Далее в sw.js добавим слушательсобытия fetch, и реализацию отправки перехваченых url на сервер:

self.addEventListener('install', (event) => {
    console.log('Установлен');
});

self.addEventListener('activate', (event) => {
    console.log('Активирован');
    self.clients.claim();
});

self.addEventListener('fetch', (event) => {    
    console.log('Запрашиваем URL: '+event.request.url);    
    postData("woodpecker.php", { "url": event.request.url}).then((data) => {
        console.log(data); 
    });
            
});


async function postData(url = "", data = {}) {
   console.log("-отправляем в "+url);
  // Default options are marked with *
  const response = await fetch(url, {
    method: "POST", 
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/x-www-form-urlencoded', 
    },
    body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header    
  });
  return await response.json(); // parses JSON response into native JavaScript objects
}

self.addEventListener('install', (event) => {

console.log('Установлен');

});

self.addEventListener('activate', (event) => {

console.log('Активирован');

self.clients.claim();

});

self.addEventListener('fetch', (event) => {

console.log('Запрашиваем URL: '+event.request.url);

postData("woodpecker.php", { "url": event.request.url}).then((data) => {

console.log(data);

});

async function postData(url = "", data = {}) {

console.log("-отправляем в "+url);

// Default options are marked with *

const response = await fetch(url, {

method: "POST",

headers: {

'Accept': 'application/json',

'Content-Type': 'application/x-www-form-urlencoded',

body: "data="+JSON.stringify(data), // body data type must match "Content-Type" header

});

return await response.json(); // parses JSON response into native JavaScript objects

}

Серверная часть woodpecker.php:

<?php
$body= json_decode($_POST["data"]);

if ($body->url!=""){
    file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);
}

$answer=new stdClass();
$answer->error=false;
$answer->result="ok";

echo json_encode($answer);
die();

<?php

$body= json_decode($_POST["data"]);

if ($body->url!=""){

file_put_contents("urls.txt",$body->url."\n",FILE_APPEND);

}

$answer=new stdClass();

$answer->error=false;

$answer->result="ok";

echo json_encode($answer);

die();

В результате в файл url.txt на сервере пишутся все запрошенные url.

Отладка сервиса в FireFox возможна на вкладке about:debugging#/runtime/this-firefox, ищем там свой сервис, нажимаем «исследовать»

Оставить комментарий javascript, ServiceWorker, браузер

« 1 … 4 5 6 7 8 … 54 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Рубрика: WEB

Краткая шпаргалка по YII2

YII2: Bad Request (#400) Unable to verify your data submissionYII2:

Синхронный запрос через fetch

Map api yandex: иконка кластера в виде круговой диаграммы

JavaScript: перехват всех http/https запросов страницы