DEV Community: Nicolás Danelón

Court bans LinkedIn data protection violations

Nicolás Danelón — Mon, 30 Oct 2023 22:53:07 +0000

The social network LinkedIn may no longer announce on its website that it does not respond to “do-emergency track” signals with which

“When consumers: activate their browser’s 'Do Not-Track’ function, this is a clear message: they don’t want their surfing behavior to be spied on for advertising and other purposes,” says Rosemarie Rodden, legal expert at vzbv. “Website operators must respect this signal.”

Objection ignored against tracking

Internet surfers can tell via their browser that the websites visited receive a “do-not track” (DNT) signal. It sends their wish that the online activities are not tracked and evaluated. LinkedIn had announced on its website that it did not respond to such DNT signals. Thus, against the will of the users, personal data such as the IP address and information about the use of the website can also be evaluated for analysis and marketing purposes, including third-party providers.

Objection ignored against tracking

Sauce

Let's talk about CORS & frontend with vite

Nicolás Danelón — Mon, 24 Jul 2023 15:33:50 +0000

I often find myself developing websites with React or Preact.
Lately, Preact has become my favorite, as it's much faster and lighter.

Sometimes I don't need to use a real server—for example, when I'm teaching a class, making a demo, or working without internet. It's also helpful when I need to simulate requests to a server, even if it's local.

To test my frontend, I create a simple PHP file that reads the data sent via POST and returns a JSON object similar to the one that the real server would provide.

(At the end of the article, there is a Node.js version of the PHP server.)

php -S 127.0.0.1 -t server.php

<?php

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
    http_response_code(400);
    echo json_encode([
        'status' => 'error',
        'message' => 'Username or password not provided'
    ]);
    exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
    echo json_encode([
        'status' => 'success',
        'token' => 'fake_token'
    ]);
} else {
    http_response_code(401);
    echo json_encode([
        'status' => 'error',
        'message' => 'Invalid username or password'
    ]);
}

I like to use PHP because it has no dependencies, which is great for a demo. But this code doesn't work. The error is:

Response body is not available to scripts (Reason: CORS Failed)

After reading the title, you might have guessed that the error comes from CORS. But what is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a security mechanism that allows you to control who can access the server's resources.

So, all I have to add to my PHP code is a couple of HTTP headers, right?

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

My code still doesn't work! My request doesn't reach the server. But why?

Upon inspection, Axios is sending a request before the POST request I'm making. This first request is known as a "preflight request." It's an OPTIONS request; it only asks the server for the types of requests that are allowed. Knowing that, let's modify our headers and add a small if-statement:

// headers
header('Access-Control-Allow-Methods: POST, OPTIONS');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}
// fake login

Now it works! Generally, browsers try to enforce the "Same Origin" policy, which limits how JavaScript code that's running in one origin can access resources in another origin. (Origins can be domains, protocols, or ports.)

Finally, our PHP code looks like this:

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173'); // CORS
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
  http_response_code(400);
  echo json_encode([
    'status' => 'error',
    'message' => 'Username or password not provided'
  ]);
  exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
  echo json_encode([
    'status' => 'success',
    'token' => 'fake_token'
  ]);
} else {
  http_response_code(401);
  echo json_encode([
    'status' => 'error',
    'message' => 'Invalid username or password'
  ]);
}

In case you don't have the PHP interpreter on your system, here's a version of the same program in Node.js with Express:

pnpm init && pnpm add express body-parser cors

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(cors());

app.post("/login", (req, res) => {
  const { username, password } = req.body;

  if (!username || !password) {
    res
      .status(400)
      .json({ status: "error", message: "Username or password not provided" });
    return;
  }

  if (username === "nicolas" && password === "Correct-h0rse-Battery-staple") {
    res.json({ status: "success", token: "fake_token" });
  } else {
    res
      .status(401)
      .json({ status: "error", message: "Invalid username or password" });
  }
});

app.listen(port, () => {
  console.log(`Node.js server running at http://localhost:${port}`);
});

Cover credits:

Hablemos de CORS & frontend con vite

Nicolás Danelón — Sun, 23 Jul 2023 19:20:15 +0000

A menudo me encuentro desarrollando sitios con react o preact. Ultimamente preact es mi favorito, mucho mas rapido y liviano. A veces no es necesario usar un servidor real, estoy dando clases, haciendo una demo o simplemente estoy trabajando sin internet y necesito simular requests a un servidor aunque sea local.

Entonces como quiero probar mi frontend hice un simple archivo php que va a leer lo que le mande por POST y por ahora va a devolver json similar al que me va a dar el servidor real.

(Al final del artículo hay una version node del servidor php)

php -S 127.0.0.1 -t server.php

<?php

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
    http_response_code(400);
    echo json_encode([
        'status' => 'error',
        'message' => 'Username or password not provided'
    ]);
    exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
    echo json_encode([
        'status' => 'success',
        'token' => 'fake_token'
    ]);
} else {
    http_response_code(401);
    echo json_encode([
        'status' => 'error',
        'message' => 'Invalid username or password'
    ]);
}

Uso php porque no tiene dependencias, para una demo alcanza y sobra. Pero este código no funciona. El error que veo en la consola dice:

Response body is not available to scripts (Reason: CORS Failed)

A estas alturas, sobre todo despues de haber leido el titulo, ya sabemos por donde viene el error. Pero qué es CORS?

CORS son las siglas de Cross-Origin Resource Sharing. Es un mecanismo de seguridad que permite especificar quien puede acceder a los recursos del servidor.

Entonces lo unico que tengo que agregar a mi codigo php es un par de headers http, verdad?

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173');
header('Access-Control-Allow-Methods: POST');
header('Access-Control-Allow-Headers: Content-Type');

Mi código sigue sin funcionar! Mi request no llega al servidor, pero por que?

Aparentemetne axios está haciendo un request antes del request POST que tiene el JSON con mis credenciales. A este request se lo conoce como una "preflight request" o solicitud previa. Es un request que tiene el verbo OPTIONS y lo unico que hace es preguntar al servidor que tipos de request se puede hacer. Vamos a modificar nuestros headers y a agregaremos un pequeño if para este nuevo verbo:

// headers
header('Access-Control-Allow-Methods: POST, OPTIONS');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}
// fake login

Ahora si! Ahora funciona! Generalmente los navegadores intentan asegurar la politica "Same origin" que impide que un código JavaScript en un origen (dominio, protocolo o puerto) pueda acceder a recursos en otro origen diferente.

Nuestro código php finalmente quedaría así:

<?php

header('Content-Type: application/json');
header('Access-Control-Allow-Origin: http://localhost:5173'); // CORS
header('Access-Control-Allow-Methods: POST, OPTIONS');
header('Access-Control-Allow-Headers: Content-Type');

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}

$json = file_get_contents('php://input');
$data = json_decode($json, true);

if (!isset($data['username']) || !isset($data['password'])) {
    http_response_code(400);
    echo json_encode([
        'status' => 'error',
        'message' => 'Username or password not provided'
    ]);
    exit;
}

if ($data['username'] === 'nicolas' && $data['password'] === 'Correct-h0rse-Battery-staple') {
    echo json_encode([
        'status' => 'success',
        'token' => 'fake_token'
    ]);
} else {
    http_response_code(401);
    echo json_encode([
        'status' => 'error',
        'message' => 'Invalid username or password'
    ]);
}

Es posible que no tengas el interprete de php en tu sistema, acá podés encontrar prácticamente el mismo código en nodejs con express:

pnpm init && pnpm add express body-parser cors

const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");

const app = express();
const port = process.env.PORT || 3000;

app.use(bodyParser.json());
app.use(cors());

app.post("/login", (req, res) => {
  const { username, password } = req.body;

  if (!username || !password) {
    res
      .status(400)
      .json({ status: "error", message: "Username or password not provided" });
    return;
  }

  if (username === "nicolas" && password === "Correct-h0rse-Battery-staple") {
    res.json({ status: "success", token: "fake_token" });
  } else {
    res
      .status(401)
      .json({ status: "error", message: "Invalid username or password" });
  }
});

app.listen(port, () => {
  console.log(`Servidor Node.js ejecutándose en http://localhost:${port}`);
});

Créditos del cover: