AI bots (OpenAI ChatGPT et al) - comment les bloquer - Didier J. MARY (blog)

Bon, il faut commencer à lutter contre les IA... en leur coupant l'accès à nos contenus.

Je copicolle ici pour plus tard... Voyez le site pour plus de précisions (vraiment très bien expliqué)

1. robots.txt

👉 Rappel, il se met à la racine du site

On y colle

# AI crawlers
User-agent: anthropic-ai
User-agent: Bytespider 🆕
User-agent: CCBot
User-agent: ChatGPT-User
User-agent: cohere-ai
User-Agent: FacebookBot
User-agent: Google-Extended
User-agent: GPTBot
User-agent: Omgilibot
Disallow: /

2. le header

On y ajoute <meta name="robots" content="noai, noimageai">

3. le fichier ai.txt

Apparemment pas encore obligatoire mais qui pourrait le devenir.

# Spawning AI
# Prevent datasets from using the following file types

User-Agent: *
Disallow: *.txt
Disallow: *.pdf
Disallow: *.doc
Disallow: *.docx
Disallow: *.odt
Disallow: *.rtf
Disallow: *.tex
Disallow: *.wks
Disallow: *.wpd
Disallow: *.wps
Disallow: *.html
Disallow: *.bmp
Disallow: *.gif
Disallow: *.ico
Disallow: *.jpeg
Disallow: *.jpg
Disallow: *.png
Disallow: *.svg
Disallow: *.tif
Disallow: *.tiff
Disallow: *.webp
Disallow: *.aac
Disallow: *.aiff
Disallow: *.amr
Disallow: *.flac
Disallow: *.m4a
Disallow: *.mp3
Disallow: *.oga
Disallow: *.opus
Disallow: *.wav
Disallow: *.wma
Disallow: *.mp4
Disallow: *.webm
Disallow: *.ogg
Disallow: *.avi
Disallow: *.mov
Disallow: *.wmv
Disallow: *.flv
Disallow: *.mkv
Disallow: *.py
Disallow: *.js
Disallow: *.java
Disallow: *.c
Disallow: *.cpp
Disallow: *.cs
Disallow: *.h
Disallow: *.css
Disallow: *.php
Disallow: *.swift
Disallow: *.go
Disallow: *.rb
Disallow: *.pl
Disallow: *.sh
Disallow: *.sql
Disallow: /
Disallow: *

4.le .htaccess

👉 Rappel, il se met à la racine du site

On y ajoute

RewriteCond %{HTTP_USER_AGENT} (anthropic-ai|Bytespider|CCBot|ChatGPT-User|FacebookBot|GPTBot|Omgilibot) [NC]
RewriteRule ^ – [F]

5.l'IP

En bloquant ces adresses:

20.9.164.0/24
20.15.240.64/28
20.15.240.80/28
20.15.240.96/28
20.15.240.176/28
20.15.241.0/28
20.15.242.128/28
20.15.242.144/28
20.15.242.192/28
52.230.152.0/24
Via https://sebsauvage.net/links/

Notes perso JS : usage de fetch()

Je me note ici pour une prochaine fois parce que fetch n'est pas forcément très intuitif...

2 façons d'utiliser fetch :

la plus tendance et élégante : en enchaînant les then()

fetch("index.php", { method: 'POST', body: formData })
  .then((response)=>{
        // on attend l'arrivée de la réponse et on la traite
        return response.text(); // ou response.json();
  })
  .then((text)=>{
         // on attend la fin du traitement de la réponse  et on en traite le contenu
       console.log(text);
  });

la plus lisible (?) : avec async et await

En gros, on crée une fonction asynchrone pour pouvoir utiliser les await.

const fetchAPI = async(URL) => {
    const response = await fetch(URL);  // on attend l'arrivée de la réponse 
    const data = await response.json();  // on attend la fin du traitement de la réponse
    console.log(data)
}
fetchAPI("https://jsonplaceholder.typicode.com/todos/1")

CSS - 5t3ph@front-end.social - I'm not sure enough folks realize that :is()/:where(), and :not() can check _ancestor_ and _previous sibling_ conditions.p:is(h2 + *) = paragraphs that are directly after an h2p:not(blockquote *) = paragraphs that are not within blockquotesI've used these techniques to simplify what would otherwise be rather unmaintainable selectors or may have previously required additional conditional classes.https://codepen.io/5t3ph/pen/KKEmMXR

Pas mal cette astuce ! On peut avoir des conditions qui prennent en compte un élément parent ou un élément frère pour cibler un élément...

  • p:is(h2 + *) : seulement les paragraphes directement après un H2
  • p:not(blockquote *) : les paragraphes ne se trouvant pas dans des blockquotes...

Ça peut carrément simplifier certains cas !

✂Templatemaker ︎

Plein de modèles de découpes et pliages - essentiellement des boîtes - avec un générateur qui permet de spécifier les dimensions.

On peut imaginer de les importer ensuite dans un logiciel de découpe laser...

Quelle touche utiliser pour accéder au BIOS UEFI de sa carte mère

Pour mémoire

  • Asus : F2 ou Suppr
  • Gigabyte : Suppr ou F12
  • MSI (Micro-Star International) : Suppr
  • ASRock : F2 ou Suppr
  • Biostar : Suppr
  • EVGA : Suppr
  • Supermicro : Suppr
  • Intel : F2
  • NZXT : Suppr ou F2
  • Acer : F2 ou Suppr
  • Dell : F2 ou F12
  • HP (Hewlett-Packard) : F10 ou Échap
  • Lenovo : F2 ou F12
  • ASUS : F2 ou Suppr
  • MSI : F2 ou Suppr
  • Toshiba : F2
  • Sony VAIO : F2 ou F10
  • Samsung : F2 ou Échap
  • LG : F2 ou F12

Retour sur quelques livres lus en 2023 - Chez Sammy

Et voilà, grâce à Sammy, encore une liste de livres ... Mais quand vais-je parvenir à tout lire ?

Heureusement que j'ai déjà lu Cien años de soledad... Même en faisant un arbre généalogique on se perd... mais quelle oeuvre !

Pour ma part, j'ai fini quelques Carlos Sisí...

Meme mon chat : un minouscule dump...

Parce que les fêlés félins, parfois, c'est la chatastrophe...

waiting bean meme «mon chat à cinq heure du matin» gay kermitt meme «mon chat  quand je ne me lève pas assez tôt» disapointed guy meme «mon chat quand je me redirige vers la chambre après être allé pisser» Anthony Adams Rubbing Hands meme «mon chat quand qqun se dirige vers la cuisine» meme heavy breathing «mon chat quand je mange un dessert à la chantilly» kombucha girl meme «des croquettes de deux jours vs de l'eau de vaisselle stagnante»/>
<img src= drake meme «vomir sur la pelouse vs entrer, aller dans le salon et vomir sur la moquette»

Et en cadeau...

SVG images are accepted but not sanitized · Issue #38 · berthubert/trifecta · GitHub

Ménon... Mais dites-moi que c'est pas vrai...

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
  <circle cx="250" cy="250" r="210" fill="#fff" stroke="#000" stroke-width="8"/>
  <script type="text/javascript">alert(1);</script>
</svg>

Donc, si on colle du JS dans un SVG, le JS serait exécuté à l'affichage de l'image ?!

Je teste ci-dessous avec l'exemple donné sur la page...

omg.svg

Sur mon site, l'image s'affiche normalement sans exécuter le code... par contre, si on ouvre l'image dans un autre onglet...

Comment c'est possible de laisser un truc pareil dans la nature ?!

Via https://sebsauvage.net/links/

MediaRecorder : Bienvenue dans IE6/7/8

En ce moment je bosse sur l'appli de documents/exercices que j'utilise en cours (cf https://warriordudimanche.net/article1686/lappli-documents-que-jai-codee-pour-taf pour mémoire).

J'implémente toute une nouvelle rubrique et de nouveaux items afin de couvrir le spectre de l'expression orale de façon simple en ajoutant une sorte de labo de langue simplifié.En gros, je veux que le gamin puisse travailler à l'écoute de mots modèles mais également qu'il puisse s'enregistrer et se réécouter simplement et quelque soit le support...

Les frontend qui me lisent voient de suite où ça va couiller (merci les copaines)

Et oui, j'ai codé un truc qui fonctionne très bien, relativement propre et simple, facile à utiliser... sous Firefox, opera, vivaldi, chromium et sous Android.

Hélas, ma solution utilise l'API MediaRecorder qui semble présenter des difficultés sous certains navigateurs, vous devinez lesquels...

J'ai testé sur safari (enfin epiphany passque j'ai pas d'apple sous la pogne, tu te doutes...) et ça refuse de fonctionner, vu que MediaRecorder y est bloqué pour nôôôtre saicuritay...

J'ai ensuite testé sur Edge avec mon portable et ça n'a pas fonctionné... toutefois, quand j'ai installé le deb d'Edge sur mon linux ⬇⬇⬇ ...

Parfois, la vie vous envoie   des épreuves, vous savez...

...là, ça a fonctionné... Mais si ça marche, ça doit venir de Linux et pas de Edge (mauvaise foi inside )

Donc en gros, on revient à des soucis de compatibilité avec le nouvel IE ?! (ouelcome to aoueur fanne tasse tique taïme meuchine !)

Nous voila   revenus aux   joies d'Internet   Explorer ?!

Pourtant, canIuse me dit que ça devrait fonctionner, même sous Safari:

Capture du 2024-01-19 12-02-36.png

Bon, avec le navigateur à la pomme, il y a bien une manip à faire dans la configuration avancée pour les devs qui pourrait débloquer la situation mais je me vois mal demander ça à des élèves qui éprouvent déjà des difficultés non négligeables à discerner la barre d'adresse ou qui peinent - la sueur au front - à taper une majuscule sans passer par la touche de verrouillage...

Allez bouffer   vos morts   micro$oft   et apple
Beut ouate        iz ze   solouchonne ?

Donc, là, pour le moment, rien à faire dans l'immédiat pour utiliser simplement MediaRecorder avec safari ou Edge... j'ai donc opté pour une «solution» temporaire: en cas d'absence de l'API, j'ajoute une classe spécifique et je disable les recorders de la page, puis j'affiche un message d'avertissement avec des liens vers des navigateurs compatibles (firefox et forks en tête)...

Après, j'ai bien trouvé un polyfill qui pourrait faire le job ( https://github.com/ai/audio-recorder-polyfill ) mais je ne l'ai pas testé, c'est un peu lourd à installer et pis... c'est pas moi qui l'ai fait...

Si quelqu'un/e a une idée... je prends...

(...)

Fil RSS des articles